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

Question

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

但是当在IE或Edge中缩放浏览器时,图像会调整width(而不是height)缩放而不是缩放.图像变形了.

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

这是页面

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

这对我来说非常适合所有浏览器:)

Answer 2

除了object-fit(当前正在使用的)之外,没有规则可以实现这一点,它在EDGE ^1中有部分支持,因此如果你想在IE中使用它,你必须使用对象适合的polyfill以防万一想要只使用元素img,否则你必须做一些变通办法.

你可以在这里看到object-fit支持

UPDATE(2018)

1 -边缘具有现在部分支持对于object-fit自版本16,以及通过部分,就意味着只有在工作img元件(未来版本18 仍仅具有部分支持)

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

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

希望能帮助到你.