直接写死 width/height 会导致图片强制拉伸变形、高清屏发虚；max-width:100%+height:auto 可响应式缩放防溢出；按语义用 class+object-fit 控制裁剪方式；srcset+sizes 实现多设备适配源图。
img 标签的 width/height 属性直接写死会怎样
直接在 <img alt="html如何设置导入图片的大小不一样" > 上写 width="200" 或 style="max-width:90%"，浏览器会强行拉伸图片——哪怕原图是 400×300，也会被压成 200×150，可能模糊、变形、失真。这不是“设置大小不一样”，而是“强制统一裁剪尺度”，尤其对响应式页面很危险。
- 原图宽高比和设定值不一致时，图片必然变形（比如把头像图设成
width="100" height="50"） - 用像素值写死，在高清屏（dpr > 1）下容易发虚
-
width和height属性还会触发浏览器提前预留布局空间，避免重排，但前提是值合理
CSS 的 max-width: 100% 能解决什么问题
这是响应式图片最基础也最关键的防线。它让图片宽度随父容器缩放，但不会放大超过原始尺寸，天然防溢出、防拉伸。
- 适用于卡片、文章正文等不确定容器宽度的场景
- 必须配合
height: auto，否则可能高度塌陷或比例错乱 - 单独写
max-width: 100%不影响小图（比如 50×50 的 icon），它们不会被撑大 - 注意：如果父容器没设宽度（比如
默认满屏），max-width: 100%就等于屏幕宽——这时候小图也会被拉大，得加width: auto或具体尺寸兜底
如何让同一页面里多张图各自保持原比例且大小不同
核心是「不依赖全局规则，按需加类」。用 CSS 类区分语义，而不是靠 JS 算尺寸或 inline style 堆砌。
- 给头像图加
class="avatar"，定义.avatar { width: 48px; height: 48px; object-fit: cover; } - 给封面图加
class="cover"，定义.cover { width: 100%; height: 200px; object-fit: fill; } - 给内容插图加
class="content-img"，定义.content-img { max-width: 100%; height: auto; } -
object-fit是关键：用cover裁剪居中显示，用contain完整缩放，用fill强制拉满（慎用）
srcset 和 sizes 怎么配合实现“不同尺寸用不同图”
不是所有“大小不一样”都要靠 CSS 拉伸。真实需求常是：小屏加载小图、大屏加载大图、高 DPR 加载 2x 图——这时 HTML 层就要参与决策。
立即学习“前端免费学习笔记（深入）”；
-
srcset列出多个资源：srcset="pic-400.jpg 400w, pic-800.jpg 800w, pic-1200.jpg 1200w" -
sizes告诉浏览器“在什么条件下用多宽”：sizes="(max-width: 768px) 100vw, 50vw"表示小屏占满 viewport，大屏只占一半 - 浏览器根据设备宽度、dpr、网络条件自动选最合适的
srcset中的图，CSS 只管怎么展示这张图 - 漏掉
sizes会导致浏览器无法估算显示宽度，可能一直选最小图（尤其 SSR 场景）
object-fit 和 sizes 的组合使用——前者管“怎么框住图”，后者管“该拿哪张图”。光调 CSS 尺寸，不换源文件，高清屏和窄屏体验就永远差一截。 
