image - 如何在保持图像纵横比的同时拉伸(stretch)图像以填充 ？

Question

我需要将此图像拉伸(stretch)到可能的最大尺寸而不会溢出<div>或扭曲图像。

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

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

或

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

我不能同时使用两者(即 style="width: 100%; height: 100%;")，因为这会拉伸(stretch)图像以适应 <div> .

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

Answer 1

2016 年更新:

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

.container img {
   width: 100%;
}

---

由于您不知道纵横比，因此您必须使用一些脚本。以下是我将如何使用 jQuery (demo):

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