如何拉伸图像以填充<div>，同时保持图像的纵横比?

我需要使这张图像拉伸到最大尺寸，而不溢出它的<div>或倾斜图像。

我无法预测图像的纵横比，所以没有办法知道是否使用:

<img src="url" style="width: 100%;">

<img src="url" style="height: 100%;">

我不能同时使用(即style="width: 100%;高度:100%;")，因为这将拉伸图像以适应<div>。

<div>的大小由屏幕的百分比设置，这也是不可预测的。

当前回答

使用这种方法，你可以在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;
}

2013-01-20 06:03:25

其他回答

2016年更新:

现代浏览器的表现要好得多。你所需要做的就是将图像宽度设置为100%(演示)

.container img {
   width: 100%;
}

由于您不知道纵横比，因此必须使用一些脚本。下面是我如何用jQuery(演示)做到这一点:

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

脚本

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

2009-12-12 08:57:29

这不是一个完美的解决方案，但这个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%;
}

2012-02-22 02:12:11

如果你能够将图像设置为背景图像，那么你可以这样做，这将裁剪图像而不拉伸它:

<div style="background-image: url(...); background-size: cover; width: 100%; height: 100%;"></div>

如果你需要坚持使用<img>标签，那么从2019年开始，你现在可以使用对象适合css属性，它接受以下值: 填充|包含|覆盖|无|缩小

参见https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

举个例子，你可以有一个存放图像的容器:

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

2019-06-25 08:49:15

要使此图像拉伸到最大可能的大小，而不会溢出或倾斜图像。

应用……

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

图像的样式。

2017-12-12 17:52:26