正确做法是显式声明 max-width: 100%; height: auto；否则图片易拉伸变形，尤其在 flex 容器或无宽父容器中；需配合 srcset/sizes 适配高清屏，避免仅靠 css 缩放导致模糊。
只写 max-width: 100% 不够，必须配 height: auto
单独设 width: 100% 或 max-width: 100% 时，浏览器不会自动推导高度——它可能沿用图片原始高度、或 fallback 到默认行高，结果就是拉伸变形。真实场景中常见于 Flex 容器里的卡片图被压扁，或文章插图上下留白异常。
正确做法是显式声明：max-width: 100%; height: auto;。浏览器拿到这个组合后，会读取图片原始宽高比（来自 HTML width/height 属性、EXIF 或加载后的自然尺寸），再按比例算出实际高度。
- 不要写
height: 100%或min-height: 200px，它们会覆盖auto行为 - 如果图片是内联元素，顺手加
display: block消除底部空白 - 在 Safari 移动端，有时需额外加
width: 100%防止默认不缩放（尤其未设 viewport 的老页面）
object-fit: contain 不是等比缩放的替代方案
object-fit 只在 img 已有固定宽高（比如 width: 300px; height: 200px）时才生效。它不改变图片原始尺寸，只是决定“怎么塞进那个框里”。把它当响应式缩放用，等于先强行切一刀再补救——小图会被缩得极小，大图边缘被裁，且 IE 完全不支持。
- 想完整显示内容：用
object-fit: contain+ 明确宽高容器（如卡片封面） - 想填满区域不露白：用
object-fit: cover+overflow: hidden - 普通正文图、头像、图标等语义化图片，别用
object-fit，直接走max-width: 100%; height: auto
父容器没宽度，max-width: 100% 就会放大模糊小图
如果 img 直接放在一个没设宽的 div 里，而该 div 又是 block 元素，默认占满视口。这时 max-width: 100% 就会让一张 200×150 的小图撑到 400px 宽——像素被拉伸，立刻模糊。
- 给父容器加
max-width: 800px或width: 90%，提供明确约束 - 用 Flex/Grid 布局时，确保容器有尺寸上下文，比如
flex: 1或grid-column: 1 / -1 - 在 Flex 容器中，记得给
img加flex-shrink: 0，否则它可能被压缩到 0
srcset 和 sizes 不是可选项，是高清屏清晰度的底线
CSS 缩放本身不增加像素。一张 800px 宽的图，在 iPhone 15 Pro（3x 屏）上被缩放到 400px 宽，但只有 800 个物理像素可用——结果就是发虚。这不是 CSS 写错了，是图源没跟上。
- 必须提供多倍图：
srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x" - 漏掉
sizes，浏览器大概率只用第一张图；推荐写法：sizes="(max-width: 768px) 100vw, 50vw" - 如果用
background-image实现缩放，就彻底绕开了srcset，也丢了alt和 SEO
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
