css - 如何使图像的宽度根据定义的高度自行调整大小

Question

我正在尝试使图像可调整大小。 我有这张图片的特定高度:height: 100%(在容器内)和 width: auto;(我希望宽度适应高度自然图像大小)。

当我访问页面时一切正常，但是当我调整窗口大小时，高度被正确调整大小，但宽度保持其初始值，我希望它成比例(就像我第一次访问页面时) 到高度。

有没有办法在 CSS 中做到这一点？如果不是，更优化的解决方案是什么？

这是一个代码示例:

HTML

<div class="container">
  <img alt="test" src="/img/test.png">
</div>

CSS

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

.container img {
  height: 100%;
  width: auto; //i need it to be adapted to each height about the natural image's dimensions
}

更新

这是一个jsfiddle http://jsfiddle.net/CRGj6/1/ 有时它工作有时它不...

Answer 1

window resize 只影响元素的宽度而不影响高度。这是有道理的，因为如果你调整高度，更多的内容是可滚动的，这意味着不要对宽度做任何事情，而是增加滚动条的长度(这样更多的内容可以滚动)。假设你想保留图像的纵横比，

.wrapper .container img {
  position: relative;
  height: auto;
  width: 100%;
}

将是这个问题的解决方案。