img-fluid不能单独维持16:9宽高比，因其仅设max-width:100%和height:auto，不控制容器高度；需配合ratio容器类（如ratio-16x9）及object-fit样式才能实现等比缩放与填充。
img-fluid 为什么不能单独维持 16:9 宽高比
img-fluid 只做一件事：让图片在父容器内等比缩放，靠的是 max-width: 100% 和 height: auto。它不控制容器高度，也不干预宽高比。所以当父容器高度塌陷（比如空的 <div>），或者图片原始尺寸远小于容器宽度时，<code>img-fluid 会让图片变小但不会“撑开”容器——结果就是图片上方/下方留白，比例失守。
常见错误现象：<img src="cover.jpg" class="img-fluid"> 在卡片里显示成一条细横条，或在轮播图中上下大片空白。
- 必须配合有明确宽度的父容器（如
<div class="col-md-6">）才能生效<li>如果图片本身宽高比是 4:3，而你期望 16:9，<code>img-fluid不会拉伸或裁剪，只缩放 - 移动端加载慢时，DOM 渲染先出空白容器，再塞图，容易造成布局抖动
-
object-fit: cover或contain要显式加在<img>上，否则图片可能被拉伸变形或留白 - 旧版 Bootstrap（aspect-ratio，得用
padding-top: 56.25%+position: absolute模拟，且必须加position: relative到容器
ratio 类怎么和 img-fluid 配合用才有效
Bootstrap 5.3+ 的 ratio 系列类（如 ratio ratio-16x9）本质是给**容器**设 aspect-ratio，再用 position: relative + overflow: hidden 包裹子元素。但注意：<img> 不能直接加 ratio，必须套一层 <div>。<p>正确写法：</p>
<pre class="brush:php;toolbar:false;"><div class="ratio ratio-16x9">
@@##@@
</div></pre>
<ul>
<li>
<code>ratio 必须作用在容器上，不是 <img src="hero.jpg" class="img-fluid" style="max-width:90%"> 标签本身
为什么加了 ratio 还是变形或溢出
最常踩的坑是混用行内 width/height 和响应式类。例如：<img> —— 这里的 width 和 height 是 HTML 属性，浏览器会转成 style="max-width:90%"，直接覆盖 max-width: 100%，导致图片在小屏上横向滚动。
- 删掉所有
width/heightHTML 属性，让 CSS 全权控制尺寸 - 避免在
<img src="x.jpg" class="img-fluid" style="max-width:90%" style="max-width:90%">上写style="width: 100%"，它和max-width: 100%冲突，优先级更高 - 如果用了
object-fit: cover，确保父容器有overflow: hidden（ratio类已自带） - SVG 图片需额外设置
viewBox，否则object-fit失效
缩略图列表里要不要用 ratio
纯图片网格（比如商品图墙、相册）通常不需要每个图都套 ratio。统一宽高比靠 CSS 控制更轻量：.thumbnail-grid img { width: 100%; height: 200px; object-fit: cover; }。但如果你要适配不同设备断点、又要求严格比例，ratio 就不可少。
- 小图多、滚动频繁的页面，慎用
ratio+object-fit，部分低端安卓 WebView 渲染性能差 - 用
col-* img-fluid搭配固定高度容器（如min-height: 150px）比全靠ratio更稳 - 服务端能生成多尺寸图时，优先用
srcset+sizes，ratio只作 fallback
实际项目里，img-fluid 是底线，ratio 是进阶控制。两者不是替代关系，而是分工：一个管“缩”，一个管“框”。真正难的是在动态内容（如 CMS 插入的图）、混合尺寸图源、老旧浏览器兼容之间找平衡点——这时候别硬套类名，该手写 CSS 就写。
