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

本文翻译自：CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios. 我正在使用图像，我遇到了纵横比问题。

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

As you can see, height and width are already specified. 如您所见，已指定height和width 。 I added CSS rule for images: 我为图片添加了CSS规则：

img {
  max-width:500px;
}

But for big_image.jpg , I receive width=500 and height=600 . 但是对于big_image.jpg ，我收到width=500和height=600 。 How I can set images to be re-sized, while keeping their aspect ratios. 我如何设置图像以重新调整大小，同时保持其纵横比。

---

#1楼

参考：https://stackoom.com/question/sVdv/CSS强制图像调整大小并保持纵横比

---

#2楼

Remove the "height" property. 删除“高度”属性。

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

By specifying both you are changing the aspect ratio of the image. 通过指定两者，您正在更改图像的纵横比。 Just setting one will resize but preserve the aspect ratio. 只需设置一个将调整大小但保留纵横比。

Optionally, to restrict oversizings: （可选）限制夸大：

<img src="big