对于IE6，你还需要包括第二行——width: 100%;

.mydiv img {
    max-width: 100%;
    width: 100%;
}
 

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

遇到完全相同的症状。以上对我来说很管用。

尝试同时设置min-height和min-width，使用display:block:

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

(小提琴)

如果你的图像的包含元素是position:relative或position:absolute，图像将覆盖容器。然而，它不会集中。

如果你知道它是水平溢出(设置margin-left:-50%)还是垂直溢出(设置margin-top:-50%)，你可以很容易地将图像居中。可以使用CSS媒体查询(和一些数学)来解决这个问题。

不，你不能像background-size:cover那样得到它，但是。

这种方法非常接近:它使用JavaScript来确定图像是横向的还是纵向的，并相应地应用样式。

JS

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

我不允许'添加一个评论'这样做，但是的，什么Eru Penkman做的是相当到位，让它像背景覆盖所有你需要做的就是改变

.tall-img { margin-top: -50%; 宽度:100%; ｝ .wide-img { margin-left: -50%; 高度:100%; ｝

TO

.wide-img { margin-left: -42%; 高度:100%; ｝ .tall-img { margin-top: -42%; 宽度:100%; ｝

解决方案#1 -对象匹配属性(缺乏IE支持)

只需设置对象适合:覆盖;在img上。

身体{ 保证金:0; ｝ img { 显示:块; 宽度:100大众; 身高:100 vh; object-fit:封面;/*或object-fit:包含;* / ｝ <img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

关于object-fit: cover:

替换的内容大小保持其纵横比 填充元素的整个内容框。如果物体的纵横比 不匹配它的长宽比的盒子，那么对象会是什么 剪得合身。

对于object-fit:包含:

被替换的内容被缩放以保持其纵横比，同时适应元素的内容框。整个对象被用来填充方框，同时保留其长宽比，因此如果对象的长宽比与方框的长宽比不匹配，则该对象将被“字母盒化”。

另外，请参阅这个Codepen演示，它比较了应用于图像的object-fit: cover和应用于背景图像的background-size: cover

解决方案#2 -用css的背景图像替换img

身体{ 保证金:0; ｝ img { 位置:固定; 宽度:0; 高度:0; 填充:50vh 50vw; 背景:url(“https://loremflickr.com/1500/1000”)无重复; background-size:封面; ｝ <img src="https://via.placeholder.com/1500x1000" alt="A random image from Flickr" />

假设您可以安排一个希望填充的容器元素，这似乎是可行的，但感觉有点笨拙。本质上，我只是在更大的区域上使用min/max-width/height，然后将该区域缩小到原始尺寸。

.container { width: 800px; height: 300px; border: 1px solid black; overflow:hidden; position:relative; } .container.contain img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; max-width: 10%; max-height: 10%; -webkit-transform:scale(10); transform: scale(10); } .container.cover img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; min-width: 1000%; min-height: 1000%; -webkit-transform:scale(0.1); transform: scale(0.1); } <h1>contain</h1> <div class="container contain"> <img src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" /> <!-- 366x200 --> </div> <h1>cover</h1> <div class="container cover"> <img src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" /> <!-- 366x200 --> </div>

实际上有一个非常简单的css解决方案，甚至可以在IE8上工作:

.container { position: relative; overflow: hidden; /* Width and height can be anything. */ width: 50vw; height: 50vh; } img { position: absolute; /* Position the image in the middle of its container. */ top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; /* The following values determine the exact image behaviour. */ /* You can simulate background-size: cover/contain/etc. by changing between min/max/standard width/height values. These values simulate background-size: cover */ min-width: 100%; min-height: 100%; } <div class="container"> <img src="http://placehold.it/200x200" alt="" /> </div>

使用CSS可以模拟对象匹配:[cover| include];使用transform和[max|min]-[width|height]。 它并不完美。这在一种情况下不起作用:如果图像比容器更宽或更短。

.img-ctr{ background: red;/*visible only in contain mode*/ border: 1px solid black; height: 300px; width: 600px; overflow: hidden; position: relative; display: block; } .img{ display: block; /*contain:*/ /*max-height: 100%; max-width: 100%;*/ /*--*/ /*cover (not work for images wider and shorter than the container):*/ min-height: 100%; width: 100%; /*--*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <p>Large square: <span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span> </p> <p>Small square: <span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span> </p> <p>Large landscape: <span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span> </p> <p>Small landscape: <span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span> </p> <p>Large portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span> </p> <p>Small portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span> </p> <p>Ultra thin portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span> </p> <p>Ultra wide landscape (images wider and shorter than the container): <span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span> </p>

你能做的是使用'style'属性将背景图像添加到元素中，这样你仍然会在HTML中调用图像，但你仍然能够使用background-size: cover css行为:

HTML:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS:

    .image-div{
    background-size: cover;
    }

这就是我如何将background-size: cover行为添加到我需要动态加载到HTML中的元素。然后你可以使用很棒的css类，如background-position: center。繁荣

我需要模拟background-size: contains，但由于缺乏支持，不能使用对象匹配。我的图像有定义尺寸的容器，这最终为我工作:

.image-container { height: 200px; width: 200px; overflow: hidden; background-color: rebeccapurple; border: 1px solid yellow; position: relative; } .image { max-height: 100%; max-width: 100%; margin: auto; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } <!-- wide --> <div class="image-container"> <img class="image" src="http://placehold.it/300x100"> </div> <!-- tall --> <div class="image-container"> <img class="image" src="http://placehold.it/100x300"> </div>

我知道这是旧的，但是我上面看到的许多解决方案都有一个问题，图像/视频对于容器来说太大了，所以实际上不像背景大小的封面。然而，我决定创建“实用类”，这样它就可以用于图像和视频。你只需给容器一个类.media-cover-wrapper，给媒体项目本身一个类.media-cover

然后你就有了下面的jQuery:

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

当调用它时，请确保注意页面大小的调整:

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

然后下面的CSS:

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

是的，它可能需要jQuery，但它的响应相当好，行为完全像background-size: cover，你可以在图像和/或视频上使用它来获得额外的SEO价值。

我们可以采用ZOOM方法。我们可以假设，如果方面图像的高度或宽度小于所需的高度或宽度，最大30%(或更高至100%)可以是缩放效果。我们可以用overflow: hidden隐藏其他不需要的区域。

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

这将调整不同宽度或高度的图像。

我找到了一个简单的解决方案来模拟覆盖和包含，这是纯CSS，适用于具有动态尺寸的容器，也没有对图像比例进行任何限制。

注意，如果你在16之前不需要支持IE或Edge，那么你最好使用object-fit。

background-size:封面

.img-container { position: relative; overflow: hidden; } .background-image { position: absolute; min-width: 1000%; min-height: 1000%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(0.1); z-index: -1; } <div class="img-container"> <img class="background-image" src="https://picsum.photos/1024/768/?random"> <p style="padding: 20px; color: white; text-shadow: 0 0 10px black"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>

在这里使用1000%是为了防止图像的自然大小大于它正在显示的大小。例如，如果图像是500x500，但容器只有200x200。使用这个解决方案，图像将被调整到2000x2000(由于min-width/min-height)，然后缩小到200x200(由于变换:scale(0.1))。

x10因子可以用x100或x1000来代替，但是在20x20的div上渲染2000x2000的图像通常不理想。:)

background-size:包含

Following the same principle, you can also use it to emulate background-size: contain: .img-container { position: relative; overflow: hidden; z-index: 0; } .background-image { position: absolute; max-width: 10%; max-height: 10%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(10); z-index: -1; } <div style="background-color: black"> <div class="img-container"> <img class="background-image" src="https://picsum.photos/1024/768/?random"> <p style="padding: 20px; color: white; text-shadow: 0 0 10px black"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div>