IE 和 Edge 修复对象匹配：cover；

Question

我在我的 CSS 中为特定页面上的图像使用了 object-fit: cover;，因为它们需要使用相同的 height。它在大多数浏览器中运行良好。

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

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

这里是page

Answer 1

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

除了object-fit（您当前正在使用的）之外，没有任何规则可以仅使用 CSS 来实现，它在 EDGE¹ 中有部分支持，所以如果如果你想在 IE 中使用它，你必须使用 object-fit polyfill 以防你只想使用元素 img，否则你必须做一些变通方法。

你可以看到object-fit支持here

更新（2019）

您可以使用简单的 JS sn-p 来检测是否支持 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 - 自第 16 版起，EDGE 现在有 partial support 和 object-fit，部分表示仅适用于 img 元素（未来版本 18 仍然仅部分支持）

Answer 3

我刚刚使用了@misir-jafarov，现在正在使用：

• IE 8,9,10,11 和边缘检测
• 在 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 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
    });
});

Answer 5

这是解决此问题的 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%;
}

来自 OP 的 HTML：

<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 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

父级：

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

儿童图片

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%;

小提琴：http://jsfiddle.net/j6hLaxz8/