用 max-width: 100% + height: auto 可靠等比缩放图片；单设 width: 100% 会强制拉伸失真；object-fit 是固定容器内的显示策略，非等比缩放首选；srcset 解决高清屏模糊；父容器需有宽度限制。
直接用 max-width: 100% + height: auto 就能可靠等比缩放，不需要 JS、不用算比例、不依赖父容器宽高是否已知。
为什么 width: 100% 单独用会失真
只设 width: 100% 时，浏览器会强制拉伸高度填满，原始宽高比被破坏。常见于响应式卡片里图片被“压扁”或“拉长”。
正确做法是让高度由宽度和原始比例自动推导：
-
width: 100%控制最大宽度（可换成max-width: 100%更安全） -
height: auto告诉浏览器：别硬设高，按原图比例算 - 务必移除
height或min-height等可能覆盖自动计算的样式
object-fit: contain 和 cover 的区别在哪
这两个是针对 <img> 容器固定尺寸（比如 width: 300px; height: 200px）时的补救方案，不是等比缩放的首选——它们不改变图片原始尺寸，只控制“怎么塞进框里”。
-
object-fit: contain：完整显示图片，留白；适合头像、图标等必须全见的场景 -
object-fit: cover：填满容器，可能裁剪边缘；适合封面图、背景图 - 注意：
object-fit在 IE 中完全不支持，如需兼容得降级用 JS 或 background-image
响应式中图片模糊？可能是 srcset 没配对
等比缩放后如果图片在高清屏上发虚，大概率是没提供高倍图源。单纯用 CSS 缩放不会提升像素密度。
- 用
srcset提供多分辨率版本：<img src="a.jpg" srcset="a.jpg 1x, a@2x.jpg 2x"> - 搭配
sizes属性更精准：sizes="(max-width: 768px) 100vw, 50vw" - 不要依赖
background-image+background-size: contain来“模拟”等比缩放——它绕过 alt、SEO、打印样式，且无法被屏幕阅读器识别
最常被忽略的一点：父容器本身要有明确宽度限制（比如 max-width 或 flex/grid 约束），否则 width: 100% 会撑到 viewport 全宽，再小的图也会被拉大失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
