实现自适应图片布局的关键是使用max-width: 100%配合height: auto保持比例，结合响应式容器、object-fit控制填充，以及Flexbox或Grid实现多图自适应排列。
实现自适应图片布局的关键是让图片在不同屏幕尺寸下都能自动调整大小，同时保持比例和美观。以下是几种常用且实用的方法。
1. 使用 max-width: 100%
这是最基础也最有效的方式。设置图片最大宽度为容器的100%，防止溢出，同时允许图片根据容器缩放。
关键代码：
img {
max-width: 100%;
height: auto;
}
说明：height: auto 确保图片保持原始宽高比，避免拉伸变形。
立即学习“前端免费学习笔记（深入）”；
2. 配合响应式容器使用
当图片放在一个宽度百分比或弹性容器中时，它会随父容器变化而自动调整。
示例：
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.container img {
max-width: 100%;
height: auto;
}
这样无论在手机还是桌面端，图片都能适配容器宽度。
3. 使用 object-fit 控制图片填充方式
当图片需要填充固定尺寸的区域时（如头像、卡片图），可以用 object-fit 保证图片不变形。
常见用法：
img {
width: 100%;
height: 200px;
object-fit: cover; /* 裁剪以填满 */
object-position: center;
}
适用场景：图片墙、文章封面、用户头像等需要统一尺寸的地方。
4. 使用 CSS Grid 或 Flexbox 布局多图自适应
多张图片并排时，可用 Flexbox 实现等宽自适应排列。
Flex 示例：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 200px; /* 最小宽度200px，可伸缩 */
max-width: 100%;
height: auto;
}
Grid 示例：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
}
优势：auto-fit + minmax 可自动换行，适合响应式图库。
基本上就这些。核心是结合 max-width、弹性布局和现代CSS特性，让图片自然适应各种设备。不复杂但容易忽略细节。
