Bootstrap 4中ratio类在IE下失效，因该类仅5.3+支持；须用padding-top:56.25%配合position-relative/absolute实现16:9比例容器，并以background-image+background-size:cover替代object-fit。
Bootstrap 4中ratio类在IE下失效怎么办
Bootstrap 4不支持aspect-ratio，也没有ratio类——这个类是5.3+才引入的。你在IE里看到“比例失调”，大概率是因为误用了5.x的文档，或者试图用ratio-16x9这类类名，它们在Bootstrap 4里根本不存在，浏览器直接忽略，容器高度塌陷。
必须退回传统padding-top技巧，且要严格满足三个条件：外层position: relative、内层position: absolute、padding值精确对应比例。
-
padding-top: 56.25%对应16:9（9 ÷ 16 = 0.5625）；padding-top: 75%对应4:3 -
<img>必须加class="position-absolute top-0 start-0 w-100 h-100"，不能只靠img-fluid - 绝对定位的父容器必须显式设
class="position-relative"，否则top: 0会相对于body定位，图片飞出可视区
object-fit在IE中完全不可用，得换方案
object-fit在IE 11及更早版本里是无效的，连cover或contain都当普通字符串忽略。如果你写了style="object-fit: cover"，IE会照常拉伸图片，毫无裁剪效果。
替代方案只有两个，且都绕不开background-image：
立即学习“前端免费学习笔记（深入）”；
- 把图片转成
div背景：<div class="bg-img" style="background-image: url(…); background-size: cover; background-position: center;"></div> - 配合
background-size: cover+min-height（不能只用height，否则小屏会截断） - 语义损失不可避免——
alt文本、SEO、可访问性全丢，这是IE兼容必须付出的代价
img-fluid在IE里生效但有隐藏陷阱
img-fluid本身在IE 9+是可用的，它依赖的max-width: 100%和height: auto都被支持。但常见错误是：你给<img>写了width="800"或height="600"属性，IE会优先按这些固有尺寸渲染，直接覆盖max-width，导致缩放失效。
解决方法非常具体：
- 删掉所有
<img>标签上的width和height属性（HTML属性，不是CSS） - 确保父容器有明确宽度，比如
<div class="col-md-6">，否则max-width: 100%无参照 - 别在
<img>上写style="width: 100%"——这会强制等比缩放失效，IE把它当固定宽处理
IE下高分屏图片模糊没法靠Bootstrap修
img-fluid对Retina屏模糊问题完全无解，它不处理设备像素比（DPR）。IE本身不支持srcset的2x语法（仅部分支持宽度描述符），所以srcset="logo.png 1x, logo@2x.png 2x"在IE里会被降级为只加载logo.png，然后被拉伸模糊。
唯一可靠路径是：
- 用SVG：IE9+支持SVG作为
<img src="logo.svg">，无缩放失真 - 用
background-image+ 媒体查询模拟srcset：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo { background-image: url(logo@2x.png); } } - 放弃IE对高倍图的原生支持——这不是代码问题，是浏览器能力边界
最易被忽略的是：Bootstrap 4项目里混用5.x文档的类名（如ratio）、在IE里硬推object-fit、以及以为img-fluid能解决DPR问题——这三个点踩中任意一个，响应式图片就必然在IE里崩掉。
