图片变形因宽高比被破坏，使用max-width: 100%和height: auto可保持比例自适应缩放，避免拉伸失真。
在
响应式布局
中，图片容易因为容器宽度变化而被拉伸或压缩，导致变形。解决这个问题的关键是让图片在保持宽高比的前提下自适应容器大小。使用
max-width: 100%
和
height: auto
是最常用且有效的方案。
为什么图片会变形？
当图片的宽度被强制设置为父容器的100%（width: 100%），但高度固定（height: xxxpx）时，浏览器会拉伸图片以填满空间，破坏原始宽高比，造成失真。
如何用CSS防止变形？
通过以下两个属性组合，可以让图片在不超过容器的前提下，等比例缩放：
max-width: 100%：
图片最大宽度不超过其容器，避免溢出
height: auto：
高度自动调整，保持原始宽高比
示例代码：
额外建议
为了进一步提升响应式体验，可以考虑：
给图片添加
object-fit
属性（适用于背景图或裁剪场景）
使用
picture
标签配合
srcset
提供多尺寸源文件
对关键图片设置
max-height
限制极端情况下的显示高度
基本上就这些。只要确保图片样式遵循“最大宽度限制 + 自动高度”原则，就能在各种屏幕下自然缩放，不丢失清晰度也不变形。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
img {
max-width: 100%;
height: auto;
display: block; /* 可选：去除底部空白 */
}