这招对我很管用

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

有一个更简单的方法，只使用CSS和HTML:

HTML:

<div 
    class="fill" 
    style="background-image: url('path/to/image.jpg');">
</div>

CSS:

.fill {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

这将把你的图像作为背景，并拉伸它以适应div的大小而不失真。

我也有类似的问题。我只用CSS解决了这个问题。

基本上，Object-fit: cover可以帮助你实现在div中定位图像时保持纵横比的任务。

但问题是物体匹配:封面在IE中无法工作，它采用100%的宽度和100%的高度，纵横比扭曲。换句话说，我在chrome浏览器中看到的图像缩放效果没有了。

我采用的方法是在容器中使用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%;

这使得图像得到对象适合:覆盖的效果。

下面是上述逻辑的演示。

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

这种逻辑适用于所有浏览器。

我在寻找一个类似的问题时遇到了这个问题。我正在制作一个响应式设计的网页，页面上放置的元素的宽度设置为屏幕宽度的百分比。高度用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标签。

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

.．.如果你想设置或改变图像(以#foo为例):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";