我在寻找一个类似的问题时遇到了这个问题。我正在制作一个响应式设计的网页，页面上放置的元素的宽度设置为屏幕宽度的百分比。高度用vw值设置。

因为我用PHP和数据库后端添加了帖子，纯CSS是不可能的。然而，我确实发现jQuery/javascript的解决方案有点麻烦，所以我想出了一个整洁的解决方案(至少我是这么认为的)。

HTML (php)

div.imgfill { float: left; position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: 33.333%; height: 18vw; border: 1px solid black; /*frame of the image*/ margin: -1px; } <div class="imgfill" style="background-image:url(source/image.jpg);"> This might be some info </div> <div class="imgfill" style="background-image:url(source/image2.jpg);"> This might be some info </div> <div class="imgfill" style="background-image:url(source/image3.jpg);"> This might be some info </div>

通过使用style=""，可以让PHP动态更新我的页面，css样式和style=""将最终在一个完美覆盖的图像中结束，缩放以覆盖动态div标签。

这招对我很管用

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

使用这种方法，你可以在div中填充不同比例的div和图片。

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

这里发现的许多解决方案都有一些限制:一些不能在IE(对象适合)或旧浏览器中工作，其他解决方案不能缩放图像(只缩小它)，许多解决方案不支持调整窗口大小，许多不是通用的，要么期望固定分辨率或布局(纵向或横向)

如果使用javascript和jquery不是一个问题，我有这个解决方案基于@Tatu Ulmanen的代码。我修复了一些问题，并添加了一些代码，以防图像是动态加载的，在开始时不可用。基本上，这个想法是有两个不同的css规则，并在需要时应用它们:一个是当限制是高度时，所以我们需要在两侧显示黑条，另一个是当限制是宽度时，所以我们需要在顶部/底部显示黑条。

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

对于像这样的HTML元素:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/> 

试试这个

HTML:

<div class="container"></div>

CSS:

.container{
background-image: url("...");
background-size: 100%;
background-position: center;
}

这不是一个完美的解决方案，但这个CSS可能会有所帮助。缩放是这段代码的工作原理，理论上，对于小图像，因子应该是无限大的，但在大多数情况下，2、4或8就可以了。

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}