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

Question

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

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

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

这是 页面

原文由 Peter van Remmen 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

来自 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 中删除浮动

原文由 Lucian 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

原文由 Furqan Rahamath 发布，翻译遵循 CC BY-SA 4.0 许可协议