根本原因是图片未声明原始宽高属性，导致浏览器无法预留空间，加载后引发布局抖动（CLS）；必须在<img>标签中显式设置width和height属性，或用aspect-ratio配合块级容器实现占位。
为什么加了 img-fluid 图片还是拉伸变形
根本原因不是类没生效，而是你同时写了破坏等比缩放的样式。比如在 <img> 上加了 height: 200px 或 width: 300px 行内样式，直接覆盖 img-fluid 的 height: auto；或者父容器用了 display: flex 但没设 align-items: flex-start，导致图片被 flex 对齐逻辑强行拉高。
常见错误包括：
-
style="width: 100%; height: 200px"—— 强制宽高，必然失真 - 外层
<div class="d-flex">包裹图片，却没给图片设align-self: flex-start - 用
object-fit: cover但没配固定容器高度，浏览器仍按原始比例渲染，裁切位置飘忽
什么时候该用 max-width: 100% 而不是 width: 100%
max-width: 100% 是响应式图片的安全底线：小图保持原尺寸，大图自动缩小，不模糊、不变形；width: 100% 是无条件拉伸，一张 100×100 的图标在桌面端会被撑成 1200×1200，立刻糊掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有内容型图片（文章配图、产品图）一律用
max-width: 100%; height: auto，Bootstrap 的img-fluid就是这条规则的封装 - 只在明确需要“填满固定容器”的场景才用
width: 100%; height: 100%; object-fit: cover，且必须确保父容器有明确宽高或aspect-ratio - 永远不要对
<img>同时写width和max-width，后者会被前者压制
如何防止图片加载时布局抖动（CLS）
即使加了 img-fluid，如果图片没声明原始尺寸，浏览器首次渲染时无法预留空间，加载后突然撑开页面，Lighthouse 就会报「累积布局偏移」（CLS）。这不是缩放问题，是占位问题。
解决方式很简单，但常被跳过：
- 在 HTML 中显式写上
width和height属性（不是 CSS）：<img src="photo.jpg" width="800" height="600" class="img-fluid"> - 若用 CMS 或 Markdown 渲染，无法手写属性，就用 JS 补全：
$("article img").attr({width: "800", height: "600"}) - 更现代的做法是配合
aspect-ratio: 4/3（需父容器支持），它比宽高属性更灵活，但 IE 不支持
高清屏（Retina）下图片模糊怎么办
max-width: 100% 只管缩放，不管像素密度。iPhone 上 1px CSS 宽度对应 2 物理像素，单倍图就会发虚。这时候必须靠 srcset 提供多倍源，而不是调大图片尺寸再缩放。
正确写法示例：
<img src="photo-1x.jpg"
srcset="photo-1x.jpg 1x,
photo-2x.jpg 2x,
photo-3x.jpg 3x"
width="800" height="600"
class="img-fluid">
注意三点：
-
srcset必须配合width/height属性或aspect-ratio，否则高倍图可能撑破布局 - 不要用
background-image替代<img>来绕过这个问题——背景图无法语义化，也不支持srcset的设备适配逻辑 - 生成多倍图时，别简单把 1x 图放大三倍存为 3x，要用原图重新导出，否则只是“更大更糊”
