Ответ 1

Вот единственное решение CSS, чтобы это исправить. Используйте ниже CSS.

.row-fluid {
  display: table;
}

.row-fluid .span6 {
  display: table-cell;
  vertical-align: top;
}

.vc_single_image-wrapper {
  position: relative;
}

.vc_single_image-wrapper .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

HTML из OP:

<div class="vc_single_image-wrapper   vc_box_border_grey">
  <div class="image-wrapper" style="background-image: url(http://i0.wp.com/www.homedecor.nl/wp-content/uploads/2016/03/Gordijnen-Home-Decor-2.jpg?fit=952%2C480;"></div>
</div>

попробуйте, это должно работать. также удалить поплавок из .row-fluid .span6

Ответ 2

У меня была похожая проблема. Я решил это с помощью только CSS.

В основном Object-fit: cover не работал в IE, он занимал 100% ширины и 100% высоты, а соотношение сторон было искажено. Другими словами, эффекта увеличения масштаба изображения не было, что я видел в Chrome.

Подход, который я выбрал, заключался в том, чтобы расположить изображение внутри контейнера с помощью absolute, а затем поместить его прямо в центр, используя комбинацию:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только он окажется в центре, я добавлю изображение,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение получить эффект Object-fit: cover.

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика работает во всех браузерах.

Ответ 3

Не существует правила для достижения этого с использованием только CSS, кроме подбора object-fit (который вы используете в настоящее время), который имеет частичную поддержку в EDGE ^1, поэтому, если вы хотите использовать это в IE, вы должны использовать объектную подгонку polyfill в случае, если вы хотите использовать только элемент img, в противном случае вы должны сделать некоторые обходные пути.

Вы можете увидеть поддержку object-fit здесь

ОБНОВЛЕНИЕ (2018)

1 - EDGE теперь имеет частичную поддержку для object-fit начиная с версии 16, и частично это означает, что работает только в элементе img (будущая версия 18 все еще имеет только частичную поддержку)

ОБНОВЛЕНИЕ (2019)

Вы можете использовать простой фрагмент JS, чтобы определить, поддерживается ли object-fit а затем заменить img для svg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = 'url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}'
      image.src = 'data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E'
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

Ответ 4

Вы можете использовать этот код JS. Просто измените .post-thumb img на ваш img.

$('.post-thumb img').each(function(){           // Note: {.post-thumb img} is css selector of the image tag
    var t = $(this),
        s = 'url(' + t.attr('src') + ')',
        p = t.parent(),
        d = $('<div></div>');
    t.hide();
    p.append(d);
    d.css({
        'height'                : 260,          // Note: You can change it for your needs
        'background-size'       : 'cover',
        'background-repeat'     : 'no-repeat',
        'background-position'   : 'center',
        'background-image'      : s
    });
});

Ответ 5

Я только что использовал @misir-jafarov и сейчас работаю с:

• IE 8,9,10,11 и обнаружение EDGE
• используется в Bootrap 4
• взять высоту своего родительского div
• закреплено вертикально на 20% сверху и горизонтально на 50% (лучше для портретов)

вот мой код:

if (document.documentMode || /Edge/.test(navigator.userAgent)) {
    jQuery('.art-img img').each(function(){
        var t = jQuery(this),
            s = 'url(' + t.attr('src') + ')',
            p = t.parent(),
            d = jQuery('<div></div>');

        p.append(d);
        d.css({
            'height'                : t.parent().css('height'),
            'background-size'       : 'cover',
            'background-repeat'     : 'no-repeat',
            'background-position'   : '50% 20%',
            'background-image'      : s
        });
        t.hide();
    });
}

Надеюсь, поможет.

Ответ 6

Столкнулся с той же проблемой в последнее время. Этот легкий polyfill сделал работу как очарование :) https://github.com/bfred-it/object-fit-images