IE 和 Edge 修复对象适合：覆盖；

Question

我在我的 CSS 中使用 object-fit: cover; 用于特定页面上的图像，因为它们需要坚持在同一个 height 上。它适用于大多数浏览器。

但是在 IE 或 Edge 中缩放我的浏览器时，图像在 width（而不是 height）中调整大小而不是缩放。图片变形了。

我可以使用什么 CSS 规则来解决这个问题？

这里是 page

Answer 1

除了 object-fit（您当前正在使用）之外，没有规则可以仅使用 CSS 来实现，它在 EDGE^{[=45= 中得到部分支持]1} 所以如果你想在 IE 中使用它，你必须使用 object-fit polyfill 以防你只想使用元素 img，否则你有做一些变通办法。

可以看到object-fit支持here

更新（2019）

您可以使用简单的 JS 片段来检测是否支持 object-fit，然后将 img 替换为 svg

//ES6 version
if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('img[data-object-fit]').forEach(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`
        })
    })
}

//ES5 version transpiled from code above with BabelJS
if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('img[data-object-fit]').forEach(function(image) {
            (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(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='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
        });
    });
}

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

[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' />

更新（2018）

1 - EDGE 现在 partial support 用于 object-fit 自版本 16 以来，部分地，这意味着仅适用于 img 元素（未来版本 18 仍然仅部分支持)

Answer 2

这里有一个 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

中删除浮动

Answer 3

你可以使用这个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
    });
});

Answer 4

我有类似的问题。我用 just 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/

此逻辑适用于所有浏览器。

Answer 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();
    });
}

希望对您有所帮助。

Answer 6

我取得了令人满意的结果：

min-height: 100%;
min-width: 100%;

这样您就可以始终保持纵横比。

将替换 "object-fit: cover;" 的图像的完整 css:

width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
transform: translate(50%, 0);

Answer 7

parent div:

height: 584px;
display: block;
background-position: center center;
background-size: cover;
width: 100%;
position: absolute;
overflow: hidden;
background-color: #fff;

child img

object-position: center center;
min-height: 100%;
display: block;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
width: auto;
min-width: 100%;
max-width: none;
-o-object-fit: cover; // you can keep them for modern browsers
object-fit: cover; // you can keep them for modern browsers
height: 100%;

fiddle: http://jsfiddle.net/j6hLaxz8/

IE 和 Edge 修复对象适合：覆盖；

IE and Edge fix for object-fit: cover;

css

internet-explorer

microsoft-edge

更新（2019）

更新（2018）

下面是上述逻辑的演示。