CSS强制图像调整大小并保持纵横比

Question

我在处理图像时遇到了宽高比问题。

<img src="big_image.jpg" width="900" height="600" alt="" />

如您所见，height 和 width 已经指定。我为图像添加了一个 CSS 规则:

img {
  max-width: 500px;
}

但对于 big_image.jpg，我收到 width=500 和 height=600。如何设置图像以调整大小，同时保持其纵横比。

Answer 1

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

如果图像对于指定区域来说太大，这将使图像缩小(不利的是，它不会放大图像)。