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

Question

我正在处理图像，我遇到了一个关于纵横比的问题。

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

可以看到，高度和宽度已经指定。我为图像添加了CSS规则：

img {
  max-width:500px;
}

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

Answer 1

我在这个问题上做了很大的努力，最终找到了一个简单的解决方法：

object-fit: cover;
width: 100%;
height: 250px;

您可以调整宽度和高度以满足您的需要，而object-fit属性将为您进行裁剪。

有关object-fit属性的可能值和兼容性表的详细信息，请访问：https://developer.mozilla.org/en-us/docs/web/css/object-fit

干杯。

Answer 2

null

css lang-css prettyprint-override">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">