如何使用 CSS 自动调整图像大小以适合 div 容器？

在 web 开发中，我们经常需要将图片放置在 div 容器中，并自动调整图片大小以适应容器大小。这个过程可以使用纯 CSS 进行操作。

使用 max-width 和 max-height 属性

我们可以使用 max-width 和 max-height 属性来限制图片的大小，并使其适应 div 容器。例如，我们可以创建以下 CSS 样式：

.img-container {
  max-width: 100%;
  max-height: 100%;
}

.img-container img {
  max-width: 100%;
  max-height: 100%;
}

在这个示例中，我们定义了一个 .img-container 类，其中包含一个 img 元素。该类具有 max-width 和 max-height 属性，可以使其自动适应父元素。我们还定义了一个 .img-container img 类，其中也包含 max-width 和 max-height 属性，以确保图片自适应。

使用 object-fit 属性

object-fit 属性是一个相对新的 CSS 属性，它允许我们在图片容器中缩放图片并进行裁剪。例如，我们可以使用以下代码：

.img-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

在这个示例中，我们通过定义 .img-container 类来创建一个具有固定宽度和高度的图片容器。然后，我们将 overflow 属性设置为 hidden，以便在容器内部显示图片并裁剪超出容器边界的部分。最后，我们使用 object-fit 属性将图片缩放并适应容器大小。

总之，使用上述技术之一都能方便地在网页中调整图像大小以适应 div 容器。