如何使用CSS使图片根据div尺寸自动调整大小

在网页设计中，让图片自适应 `div` 容器的大小是一个常见的需求，这样可以确保在不同设备和屏幕尺寸下都能保持良好的视觉效果。CSS 提供了多种方法来实现这一目标。

使用 `max-width` 和 `height` 属性

最简单的方法是使用 `max-width` 属性并将 `height` 设置为 `auto`。这样图片就会在不超过原始宽度的前提下，随着 `div` 的宽度变化而变化。

div {
width: 100%; /* 让 div 容器占满父容器宽度 */
}

img {
max-width: 100%; /* 图片宽度不超过 div 容器的宽度 */
height: auto; /* 高度自动调整，保持图片的原始宽高比 */
}

使用 `object-fit` 属性

`object-fit` 属性用于指定替换元素的内容应该如何适应其使用的高度和宽度。

div {
width: 300px;
height: 200px;

}

img {
width: 100%;
height: 100%;
object-fit: cover; /* 裁剪图片以完全覆盖 div，保持宽高比 */
}

可以使用以下值：

• `fill`: 不保持宽高比，填满容器。

• `cover`: 保持宽高比，完全覆盖容器，可能部分内容会超出容器。

• `contain`: 保持宽高比，完整显示在容器内，可能容器会有留白。

使用 `background-size` 属性

如果你把图片作为背景图，可以使用 `background-size` 属性来控制背景图片的大小。

div {
width: 300px;
height: 200px;
background: url('image.jpg') no-repeat center center;
background-size: cover; /* 背景图片覆盖整个 div */
}

响应式图片

使用 HTML 的 `` 元素或者 `srcset` 属性，也可以实现根据不同屏幕尺寸加载不同分辨率的图片。

或者

通过这些方法，你可以轻松实现图片在 `div` 容器中的自适应显示，确保在不同设备上都有良好的兼容性和视觉效果。