使用 max-width: 100% 和 height: auto 可使图片在不同屏幕下自适应且保持比例，避免变形或溢出；配合 display: block 或 flex 布局防止空白问题，object-fit 适用于裁剪场景。
在响应式网页设计中，图片需要能在不同屏幕尺寸下正常显示，同时保持原有宽高比例，避免变形或溢出容器。通过使用 max-width 和 height: auto，可以轻松实现这一目标。
使用 max-width: 100% 控制宽度
将图片的 max-width 设置为 100% 可以确保它不会超出其父容器的宽度。在小屏幕上，图片会自动缩小以适应空间；在大屏幕上，则最多显示为原始尺寸（或容器限制内的最大尺寸）。
注意：不要使用 width: 100%，因为它会强制拉伸图片，可能导致失真。示例代码：
img {
max-width: 100%;
height: auto;
}
设置 height: auto 保持比例
当图片宽度被缩放时，如果高度固定，会导致图片被拉伸或压缩。设置 height: auto 能让浏览器自动计算对应的高度，从而维持原始宽高比。
立即学习“前端免费学习笔记（深入）”；
这个组合特别适合文章内容中的插图、产品图片或用户上传的图像。
补充建议与注意事项
- 始终为图片设置 display: block 或使用 flex/grid 布局 来避免底部出现多余空白（由 inline 元素基线对齐引起）。
- 可结合 object-fit 处理背景图或裁剪需求，但仅适用于替换元素（如 img 或 video）。
- 对于需要精确控制尺寸的场景（如头像、图标），建议使用固定尺寸容器配合 object-fit: cover。
