使用 max-width: 100% 和 height: auto 可实现图片响应式缩放并保持比例；配合容器布局与 object-fit 能适应不同场景，避免失真或溢出，是响应式图片设计的核心方法。
在响应式网页设计中，图片需要根据不同设备的屏幕尺寸自动调整大小，同时保持原有比例不被拉伸变形。实现这一效果的关键在于合理使用 CSS 的 width、height 和 max-width 属性。
1. 使用 max-width: 100% 实现基本自适应
为了让图片在容器内自动缩放，最常用的方法是设置：
img {max-width: 100%;
height: auto;
}
这表示图片最大宽度不超过其容器宽度，当容器变小时，图片会等比缩小。height 设置为 auto 可防止图片被拉伸或压缩，保持原始宽高比。
2. 容器宽度变化时的响应行为
如果图片父容器宽度是动态的（如百分比布局或 Flex/Grid 布局），配合 max-width: 100% 能让图片自然适配：
立即学习“前端免费学习笔记（深入）”；
- 容器变窄 → 图片等比缩小
- 容器宽度大于图片原始尺寸 → 图片不会放大超过原图（由 max-width 限制）
这样避免了模糊或失真问题，尤其适合移动端优先的设计。
3. width 与 height 的灵活控制
单独设置 width 或 height 可以控制某一方向的尺寸：
- width: 100%：强制图片撑满容器宽度，但可能超出原图尺寸导致模糊
- height: auto：确保高度随宽度变化，维持比例
- 固定 height + auto width：适用于头像、图标等场景，但需注意横向溢出
通常建议只设 width 或 max-width，height 留为 auto，除非有特殊布局需求。
4. 配合 object-fit 处理裁剪或填充
对于固定宽高的图片容器（如卡片布局），可使用 object-fit 控制图像填充方式：
.image-container {width: 300px;
height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例并填满 */
}
cover 会裁剪图片以完全覆盖容器，contain 则完整显示图片但可能留白。
基本上就这些。掌握 max-width: 100% + height: auto 是响应式图片的核心，再根据具体布局选择是否配合 width、固定容器或 object-fit，就能应对大多数场景。
