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

小编典典

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

all

我正在处理图像，但遇到了纵横比问题。

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

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

img {
  max-width: 500px;
}

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

阅读 167

2022-03-02

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

如果图像对于指定区域太大，这将使图像缩小（缺点，它不会放大图像）。

2022-03-02