图片在小屏变形主因是固定宽高或仅设width:100%而未控高；解决方式为img{max-width:100%;height:auto}，确保等比缩放不溢出；需移除height显式设置、overflow:hidden干扰及flex/grid限制。
图片在小屏设备上被压缩变形，通常是因为设置了固定宽高（如 width: 300px; height: 200px;）或只设了 width: 100% 却没限制高度，导致浏览器强行拉伸以填满容器。用 max-width: 100% 配合 height: auto 是最直接有效的解决方式，能确保图片等比缩放、不溢出容器。
让响应式图片保持原始宽高比
核心写法很简单：
img { max-width: 100%; height: auto; }-
max-width: 100%表示图片最大宽度不超过父容器，超出时自动缩小 -
height: auto告诉浏览器按原始比例计算高度，避免被强制设为固定值而变形
避免常见干扰样式
以下 CSS 容易破坏等比缩放，需检查并移除或覆盖：
- 显式设置
height（如height: 200px或height: 100%） - 父容器设置了
overflow: hidden且未预留足够空间 - 图片被包裹在
flex或grid容器中，且子项设置了flex-shrink: 0或min-width等限制
适配更复杂布局的补充技巧
如果图片需要居中、占满区域又不失真，可结合其他属性：
立即学习“前端免费学习笔记（深入）”；
- 居中显示：
display: block; margin: 0 auto; - 作为背景图使用（适合装饰性图片）：
background-size: contain; background-repeat: no-repeat; - 需要裁剪但保持焦点（如头像）：
object-fit: cover; object-position: center;（注意兼容性，iOS Safari 早期版本需加前缀）
HTML 结构建议
尽量避免给 <img> 标签写内联 width 和 height 属性（如 <img width="600" height="400">），这些会转为 CSS 固定尺寸，干扰响应式行为。现代做法是只保留 src 和 alt，样式全由 CSS 控制。
