使用 CSS 按比例调整图像大小

在网页设计中，经常需要调整图像大小以适应页面布局，为了保持图像的比例不失真，我们可以使用 CSS 中的 width 和 height 属性，并结合 object-fit 和 object-position 属性来实现。

width 和 height 属性

width 和 height 属性分别用于设置元素的宽度和高度。通常情况下，我们只需要指定其中一个属性，浏览器会自动根据图像的比例计算出另一个属性的值。

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

上面的代码将图像按照容器的宽度等比例缩放。由于指定了 height 为 auto，因此浏览器会根据图像的比例自动计算出高度。

object-fit 属性

object-fit 属性用于指定元素的内容如何适应容器的宽度和高度。默认情况下，元素的内容会拉伸或缩小以适应容器的大小。

img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

上面的代码将图像按照容器的宽度等比例缩放，并将其内容包含在容器中，不会出现拉伸或剪裁的情况。object-fit 属性可以取以下值：

• fill：拉伸或压缩图像以填充容器。
• contain：将图像缩小以适合容器，并保持图像的纵横比。
• cover：将图像扩展以填充容器，并裁剪不必要的部分。
• none：将图像原始大小显示在容器中，不进行缩放。
• scale-down：将图像缩小以适合容器，或按原始大小显示，取决于哪种情况会使图像更小。

object-position 属性

object-position 属性用于指定元素内容的位置。默认情况下，元素的内容居中显示。

img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

上面的代码将图像按照容器的宽度等比例缩放，并将其内容填充到容器中，并将其置于容器的上部居中位置。object-position 属性可以取以下值：

• 像素值，例如 10px 20px。
• 百分比，例如 50% 0%。
• 关键字，例如 top、bottom、left、right、center。

完整示例

<div class="container">
  <img src="example.jpg" alt="example">
</div>

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

上面的代码演示了如何将一个图像按照容器的宽高比例缩放，并保证比例不失真。容器设置了固定的宽高，且具有 overflow: hidden，可以裁剪大于容器的部分。而图像使用了 object-fit: cover 和 object-position: center top，将其内容填充到容器中，并将其置于容器的上部居中位置。