object-fit的另一种选择: internet explorer封面

Question

我正在寻找object-fit的另一种方法:cover for the internet explorer，因为它不支持它。基本上，我使用object-fit:cover来避免在div中拉伸图像。我在互联网上寻找一些解决方案，但我找到的所有解决方案都是从css加载图像，而不是从img标签加载图像，就像我正在做的那样。有没有其他方法可以不在explorerCan上拉伸图片?有谁能帮我吗？

下面是一个简单的代码

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

Answer 1

好的，我用这个解决了

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

Answer 2

你真的可以使用ie9+为它创建一个替代品。所以你仍然可以在支持的地方使用object fit。在本例中，我也使用了jQuery。

if ( ! Modernizr.objectfit ) {
  $('.grid-image').each(function () {
      var $wrapper = $(this),
      imgUrl = $wrapper.find('img').prop('src');
      if (imgUrl) {
         $wrapper
         .css('backgroundImage', 'url(' + imgUrl + ')')
         .addClass('compat-object-fit')
         .children('img').hide();
      }  
   });
 }

显然，如果任何用户想要使用20世纪的软件浏览网页，他将得到20世纪版本的网页。这就像试图在4:3的电视上观看“星际穿越”(或任何现代的16:9电影)中的70 of场景一样，你不会看到对接场景的所有特征。

Answer 3

我的方法理想情况下可以在所有浏览器中工作，因为它是一个简单的CSS技巧。请查看下面的图片，看看效果如何。

我采取的方法是使用absolute在容器内定位图像，然后使用组合将其放置在中心处：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它在中心，我就会给图像

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使得图像获得了Object-fit:cover的效果。

以下是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

这一逻辑应该在所有浏览器中都有效。