对象适合的IE和边缘修复:盖; [英] IE and Edge fix for object-fit: cover;
本文介绍了对象适合的IE和边缘修复:盖;的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的CSS中使用 object-fit:cover;
在特定页面上的图片,因为他们需要坚持在同一个 height
。它在大多数浏览器中工作得很好。
但是当在IE或Edge中缩放浏览器时,图片会在 width
c> height ),而不是缩放。
这里是我们可以使用的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-position:50%50%;}
div class =vc_single_image-wrapper vc_box_border_grey> < div class =image-wrapperstyle =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
I'm using object-fit: cover;
in my CSS for images on a specific page, because they need to stick on the same height
. It works great in most browsers.
But when scaling my browser in IE or Edge, the image is resizing in width
(not height
) instead of zooming. The image gets out of shape.
What CSS rule can I use to fix this?
Here is the page
解决方案
.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>
try this, it should work. also remove float from .row-fluid .span6
这篇关于对象适合的IE和边缘修复:盖;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文