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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (57)

我需要使这张图像尽可能地伸展到最大的大小,而不会溢出它的<div>或者扭曲图像。

我无法预测图像的纵横比,因此无法知道是否使用:

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

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

我不能同时使用(即样式=“宽度:100%;高度:100%;”),因为这将扩展图像以适应<div>.

<div>具有按屏幕百分比设置的大小,这也是不可预测的。

提问于
用户回答回答于

现代浏览器的表现要好得多。您需要做的就是将图像宽度设置为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);
 })
})
用户回答回答于

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

扫码关注云+社区