根本原因是未切断图片固有宽高比约束；解法是max-width:100%配height:auto保比例缩放，object-fit:cover填满不变形，srcset/sizes适配多分辨率，flex中需设align-self或min-height:0防塌陷。
图片在不同屏幕下被拉伸变形
根本原因是没切断图片的固有宽高比约束。浏览器默认按原始尺寸渲染 <img alt="CSS如何实现响应式图片布局_利用max-width与height设为auto" >，一旦容器缩放而图片自身没做适配，就会撑破或压扁。
核心解法是用 max-width: 100% 配合 height: auto，让图片宽度随父容器收缩，高度按比例自动计算。
-
max-width: 100%是关键：它限制图片最大宽度不超过父容器，但不会强制拉宽——小图依然保持原尺寸 -
height: auto必须写：否则浏览器可能保留原始高度，导致宽高比断裂 - 别写
width: 100%：它会强制铺满，小图会被无脑拉伸 - 父容器本身得有明确宽度（比如
width: 100%或max-width: 800px），否则max-width: 100%失效
需要图片始终填满容器且不裁剪
这时候 max-width: 100% + height: auto 不够用了——它保比例但不保证填满。得换思路：用 object-fit 控制内容如何适应容器。
-
object-fit: contain：等比缩放，完整显示，留白（默认行为） -
object-fit: cover：等比缩放并裁剪，填满容器（最常用） -
object-fit: fill：强行拉伸填满，会变形，慎用 - 必须搭配
width: 100%和height: 100%才生效 - IE 不支持
object-fit，如需兼容，得用背景图 +background-size: cover替代
响应式图片还涉及 srcset 和 sizes 属性
max-width 解决的是“怎么缩”，但没解决“该加载哪张图”。大屏加载小图会模糊，小屏加载大图浪费带宽。
立即学习“前端免费学习笔记（深入）”；
-
srcset告诉浏览器有哪些分辨率版本：srcset="photo-400w.jpg 400w, photo-800w.jpg 800w" -
sizes告诉浏览器在不同视口下，图片将占据多宽：sizes="(max-width: 600px) 100vw, 50vw" - 浏览器根据
sizes计算出目标宽度，再从srcset中选最接近的资源 - 记得保留
src作为降级：老浏览器不识别srcset就直接用src
flex 或 grid 布局中图片突然塌陷
常见于把 <img alt="CSS如何实现响应式图片布局_利用max-width与height设为auto" > 放进 display: flex 容器后高度消失，只剩一条线。这不是 CSS 写错了，而是图片作为替换元素，在 flex 里默认 align-items: stretch 但又没设高度，导致被压缩。
- 加
align-self: flex-start或align-self: center让图片按自身尺寸渲染 - 或者给图片显式设置
min-height: 0（flex item 默认min-height: auto，会阻止收缩） - 更稳妥的做法是：确保父容器有高度约束，或图片外层包一层
<div> 并设 <code>overflow: hidden - 别依赖图片自身的
height属性（HTML 属性已过时），它和 CSS 的height行为不一致，容易冲突
实际项目里最容易漏掉的，是
sizes 属性和父容器宽度的联动——写了 srcset 却没配 sizes，浏览器就只能猜，往往选错资源。
