本文翻译自: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