对象适合的替代选项：盖子为互联网探险家 [英] Alternative option of object-fit:cover for internet explorer

问题描述

我正在寻找一个对象适合的替代方法：覆盖为互联网浏览器，因为不支持它。基本上我使用object-fit：cover不能拉伸图片里面的div。我在互联网上看一些解决方案，但我发现是解决方案来加载图像从CSS而不是img标签，像他们的方式，我做。有没有人有任何其他方法不拉伸图像在互联网浏览器上的一个div的任何人帮助我？

I'm looking an alternative method of the object-fit:cover for the internet explorer, because is not supporting it. Basically I'm using the object-fit:cover for not stretching images inside a div. I look on internet for some solutions but all that I found was solutions to load the image from css instead from img tag like they way I'm doing it. Does anyone has any alternative method of not stretching images inside a div on internet explorerCan anyone help me?

这里是一个简单的代码

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%;  

这篇关于对象适合的替代选项：盖子为互联网探险家的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！