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 。如何设置图像以调整尺寸，同时保持其纵横比。

答案

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

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

我一直在努力地解决这个问题，最终得出了一个简单的解决方案：

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

您可以调整宽度和高度以适合您的需求，object-fit 属性将为您进行裁剪。

object-fit属性和兼容性表的可能值的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

干杯。

下面的解决方案将允许放大和缩小图像，具体取决于父盒的宽度。

所有图像都有一个宽度固定的父容器，仅用于演示目的。在生产中，这将是父盒的宽度。

最佳实践（2018）：

该解决方案告诉浏览器以最大可用宽度渲染图像，并将高度调整为该宽度的百分比。

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

更好的解决方案：

使用更高级的解决方案，您将能够裁剪图像而不管其尺寸如何，并添加背景色以补偿裁剪。

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

对于指定填充的行，您需要计算图像的长宽比，例如：

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

因此，顶部填充 = 34.37％。