我object-fit: cover;在CSS中使用了特定页面上的图像,因为它们需要粘贴在相同的上height。它适用于大多数浏览器。
object-fit: cover;
height
但是,当在IE或Edge中缩放浏览器时,图像的大小将调整为width(而非height),而不是缩放。图像变形。
width
我可以使用什么CSS规则来解决此问题?
这是解决此问题的唯一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
.row-fluid .span6