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

窗口调整大小仅影响元素的宽度，但不影响高度。这是有道理的，因为如果你调整高度，更多的内容是可滚动的，这意味着不要做任何宽度但增加滚动条长度（所以更多的内容滚动）。假设您要保留图像的宽高比，

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

将解决这个问题。

如何使图像的宽度以定义的高度调整自身大小

1 个答案: