以上是对上述逻辑的演示。

Question

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

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

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

以下是page

Answer 1

我有类似的问题。我用只是CSS 解决了这个问题。

基本上Object-fit: cover在IE中没有工作，它占据了100％的宽度，100％的高度和宽高比被扭曲了。换句话说，我在chrome中看到的图像缩放效果并不存在。

我采用的方法是使用绝对将图像放在容器内，然后使用组合将其放在中心：

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（您当前使用的）之外，没有规则可以实现这一点，它在EDGE ¹中有部分支持因此，如果你想在IE中使用它，你必须使用object-fit polyfill，以防你只想使用元素img，否则你必须做一些解决方法。

您可以看到object-fit支持here

UPDATE（2018）

1 - 自16版以来，EDGE现在object-fit已img，部分地，它仅适用于object-fit元素（未来版本18 仍然只有部分支持）

partial support

UPDATE（2019）

您可以使用简单的JS代码段来检测是否支持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` }) }) }

＆＃13;

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
}

＆＃13;

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

＆＃13;

WizardNewFileCreationPage

＆＃13;

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

我刚刚使用了@ 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 5

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

<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

父 div：

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/

IE和Edge修复了对象适合：封面;

7 个答案:

以上是对上述逻辑的演示。

UPDATE（2018）

partial support

UPDATE（2019）