我正在寻找Internet Explorer的object-fit:cover的替代方法,因为它不支持它。基本上,我使用object-fit:cover来不拉伸(stretch)div中的图像。我在互联网上寻找一些解决方案,但是我发现的所有解决方案都是从css而不是从img标记加载图像,就像他们这样做一样。是否有人可以在Internet Explorer上的div内不拉伸(stretch)图像?
这是一个简单的代码
的HTML
<div class="grid-image">
<img itemprop="image" alt="TEST" src="images/15.jpg">
</div>
的CSS
.grid-image {
width: 100%;
background-color: grey;
position: relative;
overflow: hidden;
height: 100%;
}
grid-image img {
object-fit: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
最佳答案
好吧,我用这个解决了
的HTML
<div class="grid-image" style="background-image: url(images/15.jpg);"></div>
的CSS
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
关于html - 对象适合的替代选项:cover for internet explorer,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33473978/