这里是上述逻辑的演示。

Question

我正在寻找对象适合的另一种方法：覆盖Internet Explorer，因为它不支持它。基本上我使用的是物体贴合：盖子不会拉伸div内的图像。我在互联网上寻找一些解决方案，但我发现的所有解决方案都是从css加载图像而不是img标签，就像我正在做的那样。有没有人有任何替代方法不在Internet Explorer上的div内拉伸图像任何人都可以帮助我吗？

这是一个简单的代码

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

You can really create an alternative for ie9+ using Modernizr. So you can still using object fit where it's supported. In this example I use jQuery too.

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

Obviously if any user wants to browse the web with software from the 20th century he will get a 20th century version of the web. It's like trying to watch the 70mm scenes from Interstellar (or any modern 16:9 film) in a 4:3 tube tv, you won't see all the features of the docking scene.

Answer 3

我的方法理想地适用于所有浏览器，因为这是一个简单的 CSS 技巧。请检查以下图像以查看其效果。

我采取的方法是使用绝对将图像放置在容器内，然后使用以下组合将其放置在中间位置：

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/

此逻辑在所有浏览器中均应适用。

对象适合的替代选项：用于Internet Explorer

3 个答案:

这里是上述逻辑的演示。