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

一尘不染

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

css

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

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

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

阅读 310

2020-05-16

共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

2020-05-16