CSS 自适应图片根据 div 大小进行均匀填充

1. 前言

在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的 object-fit 属性来实现这一需求。

2. 使用 `object-fit` 属性

object-fit 是一个CSS属性，专门用于控制替换元素（如 <img>、<video> 等）在其容器内的显示方式。常用的值有：

fill: 默认值，拉伸图片以完全填充容器，不保持图片的宽高比。
contain: 使图片尽可能大地填充容器，同时保持图片的宽高比，整个图片都能显示出来。
cover: 使图片保持宽高比的同时完全填充容器，图片可能会被裁剪。
none: 保持图片的原始尺寸。
scale-down: 根据图片和容器的尺寸，缩小图片或保持原尺寸。

3. 示例代码

3.1 HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自适应图片示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="image-container"><img src="example.jpg" alt="示例图片"></div>
</body>
</html>

3.2 CSS

/* 确保容器有特定的尺寸 */
.image-container {width: 100%;height: 300px; /* 你可以根据需求调整高度 */border: 1px solid #ccc;overflow: hidden;
}/* 使图片均匀填充容器 */
.image-container img {width: 100%;height: 100%;object-fit: cover; /* 使用 cover 使图片均匀填充容器 */
}

在这个示例中，object-fit: cover 属性确保图片按照容器的大小进行自适应填充，同时保持图片的宽高比。如果图片的宽高比和容器不同，图片的部分内容可能会被裁剪。

完整示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自适应图片示例</title><style>/* 确保容器有特定的尺寸 */.image-container {width: 100%;height: 300px; /* 你可以根据需求调整高度 */border: 1px solid #ccc;overflow: hidden;}/* 使图片均匀填充容器 */.image-container img {width: 100%;height: 100%;object-fit: cover; /* 使用 cover 使图片均匀填充容器 */}</style>
</head>
<body><div class="image-container"><img src="example.jpg" alt="示例图片"></div>
</body>
</html>