使用 width: 100% 可使图片相对于父容器自适应缩放，适用于响应式布局；2. 配合 max-width: 100% 或具体像素值可防止图片溢出或过度拉伸；3. 父容器需具备响应式宽度（如百分比或 flex 布局），才能确保图片正确缩放；4. 结合高质量源图避免小图拉伸模糊，实现平滑自适应效果。
在响应式网页设计中，让图片自适应不同屏幕尺寸是基本需求。通过合理使用 width 和 max-width 配合百分比单位，可以轻松实现图片的弹性布局。
图片宽度设为百分比
将图片的 width 设置为百分比，可以让它相对于父容器自动缩放。
例如：当设置 width: 100%; 时，图片会填满其父元素的宽度，并随父容器大小变化而调整自身尺寸。这在移动端显示大图或横幅图片时非常实用。
注意：如果原始图片分辨率较小，强行拉伸到100%可能导致模糊。因此建议配合高质量源图使用。
立即学习“前端免费学习笔记（深入）”；
使用 max-width 防止溢出
max-width 是控制图片最大显示宽度的关键属性。通常与百分比 width 搭配使用，避免图片超出容器边界。
常见写法：
- img { width: 100%; max-width: 100%; }
- 或更精确地限制最大尺寸：max-width: 600px;
这样既保证了小屏幕上能缩小显示，又在大屏幕上不会无限拉伸变形。
结合父容器控制布局
图片的自适应效果还依赖于父容器的宽度设定。确保父元素本身具有响应式宽度（如用百分比或 flex 布局），才能让内部图片正确缩放。
示例场景：
- 在一个 width: 80% 的 div 中插入图片，设置 img { width: 100% }，图片就会占满这个 80% 宽度区域。
- 使用 flexbox 或 grid 布局时，子项中的图片也能自然适配可用空间。
基本上就这些。关键是理解 width 百分比基于父级，max-width 提供上限保护，两者结合就能实现平滑的响应式图片效果。
