HTML 图片自动适应 DIV 容器大小 - object-fit 属性实现方法

使用 CSS 的 `object-fit` 属性来实现让 `img` 自动适应 `div` 容器大小。具体步骤如下：

1. 首先，给 `div` 容器设置一个固定的宽度和高度。

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

.container {
  width: 200px;
  height: 200px;
}

2. 接下来，在 `img` 标签上设置 `object-fit` 属性为 `cover`。

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

这样，`img` 标签就会自动适应 `div` 容器的大小，并且保持其宽高比例，当 `img` 的宽高比例与容器不一致时，`object-fit: cover` 会自动裁剪图片以适应容器大小。