我们可以采用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%);
}

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

解决方案#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" />

不，你不能像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/

我知道这是旧的，但是我上面看到的许多解决方案都有一个问题，图像/视频对于容器来说太大了，所以实际上不像背景大小的封面。然而，我决定创建“实用类”，这样它就可以用于图像和视频。你只需给容器一个类.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价值。

假设您可以安排一个希望填充的容器元素，这似乎是可行的，但感觉有点笨拙。本质上，我只是在更大的区域上使用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>

尝试同时设置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媒体查询(和一些数学)来解决这个问题。