使用 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。