我在处理图像时遇到了宽高比问题。
<img src="big_image.jpg" width="900" height="600" alt="" />
如您所见,height
和 width
已经指定。我为图像添加了一个 CSS 规则:
img {
max-width: 500px;
}
但对于 big_image.jpg
,我收到 width=500
和 height=600
。如何设置图像以调整大小,同时保持其纵横比。
最佳答案
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">
如果图像对于指定区域来说太大,这将使图像缩小(不利的是,它不会放大图像)。
关于CSS强制图像调整大小并保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12991351/