图片高度自适应需用max-width:100%配合height:auto实现等比缩放，Flex/Grid容器中须加min-width:0防止失效；固定尺寸容器用object-fit控制填充方式；搭配srcset+sizes实现响应式图片加载。
图片高度自适应不是靠单独设 height 属性实现的，而是通过控制宽度上限 + 保持比例 + 浏览器自动计算高度来完成。核心是让浏览器“知道它能撑多宽”，然后按原始宽高比推算出合理高度。
用 max-width + height: auto 强制等比缩放
这是最通用、兼容性最好的写法：
- 给 img 写 max-width: 100%：限制图片最大显示宽度不超过父容器
- 同时写 height: auto：告诉浏览器别固定高度，按原始比例算
- 务必清除 img 标签上可能存在的内联 width/height 属性（如 width="600" height="400"），否则 height: auto 会被覆盖失效
在 Flex 或 Grid 容器里要加 min-width: 0
如果图片放在 display: flex 或 display: grid 的容器中，它默认有 min-width: auto，会“扛着原始宽度”拒绝缩小，导致 max-width: 100% 失效：
- 补上 min-width: 0，覆盖默认行为
- 完整推荐样式：
img { max-width: 100%; height: auto; min-width: 0; } - 不依赖 flex-shrink: 1，那个对 img 不稳定
需要固定容器尺寸时用 object-fit
当父容器本身有明确宽高（比如头像框 80×80px），但图片比例不统一，就要靠 object-fit 控制内部适配方式：
立即学习“前端免费学习笔记（深入）”；
- object-fit: cover：等比缩放后居中裁剪，填满整个容器（适合封面、头像）
- object-fit: contain：等比缩放后完整显示，留白（适合产品图、图表）
- 必须配合显式设置容器的 width 和 height 才生效
- 老版 iOS Safari 需加
-webkit-object-fit前缀；IE 不支持，fallback 可用 background-image
别只靠 CSS 缩放，记得搭配 srcset + sizes
CSS 控制的是“怎么显示”，而 srcset + sizes 控制的是“加载哪张图”。光缩放一张大图，在小屏上浪费带宽，高清屏上又可能模糊：
- 用
sizes="(max-width: 768px) 100vw, 50vw"告诉浏览器：“这张图在小屏占满宽度，大屏占一半” - srcset 列出不同固有宽度的图，如
"small.jpg 480w, medium.jpg 960w, large.jpg 1920w" - 浏览器结合 sizes 和设备 DPR，自动选最匹配的源，再用上面的 CSS 规则渲染
