我正在寻找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/

10-11 23:28