CSS强制调整图像大小并保持宽高比

小编典典

CSS强制调整图像大小并保持宽高比

css

我正在处理图像，但遇到宽高比问题。

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

如您所见，height并且width已经指定。我为图像添加了CSS规则：

img {
  max-width:500px;
}

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

阅读 679

2020-05-16

共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">

如果对于指定区域太大，则会缩小图像（不利的一面是，不会放大图像）。

2020-05-16