CSS 图像适合具有纵横比的 div

CSS 图像经常用来装饰网页中的元素，许多时候我们需要将图像放在一个具有特定纵横比的 div 中。本文介绍如何使用 CSS 来处理这个问题。

纵横比介绍

纵横比（aspect ratio）是一张图片的宽和高之间的比例关系。例如，一张 16:9 的图片宽度是高度的 16/9 倍。

保持纵横比显示图片

由于 CSS 图像具有自适应性，如果不处理，图像将被拉伸或压缩以适应所在元素的宽度和高度。我们需要在 CSS 中设置图像的 width 和 height，同时也需要保持它们之间的原始纵横比。

一个简单的方法是将图像设置为背景图片：

div {
  background-image: url(image.jpg);
  background-size: cover;
}

这种方法在不同尺寸的屏幕上始终保持图像的纵横比，但是我们无法对其 width 和 height 进行控制。

如果我们需要显示图像的 alt 文本或为图像添加其他交互元素，则需要将其包含在 div 中：

div {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这里我们使用了一个 padding-bottom 百分比值来保持纵横比。这个值应该根据图像的纵横比进行调整。

结论

使用 CSS 控制具有纵横比的图像可以让我们在网页中更灵活地布局和管理图像。无论是将图像作为背景图像还是将其包含在 div 中，我们始终应该保持其原始的纵横比。