Bootstrap 5 中h-100类在Chrome中生效但在Safari中失效（图片组场景）

Ah, I’ve run into this exact Safari vs Chrome Bootstrap aspect ratio issue before—super frustrating! Let’s break down why this happens and how to fix it.

这个兼容性问题主要源于Safari和Chrome对CSS百分比高度与aspect-ratio属性的交互处理逻辑差异：

• Bootstrap的h-100类会强制图片设置height: 100%，覆盖了img-fluid默认的height: auto。Chrome在这种场景下，会自动结合父容器的aspect-ratio计算值，让图片维持固有宽高比（相当于隐含了比例保护逻辑）；但Safari不会——它会严格按照width: 100% + height: 100%的规则拉伸图片，完全忽略图片本身的宽高比，导致高度异常放大。
• 另外，Safari对动态计算的父容器高度（由aspect-ratio生成的高度）作为百分比高度参考的支持，相比Chrome更严格，容易出现计算偏差，进一步加剧了拉伸问题。

针对这个问题，有几个简单且有效的修复方案，按推荐程度排序：

方案1：使用Bootstrap的object-fit工具类 #

这是最直接的方法，明确告诉浏览器如何缩放图片以填充容器，同时保留宽高比：

<!-- 用object-fit-cover让图片裁剪填充容器，不会拉伸 -->
<img src="your-image.jpg" class="img-fluid h-100 object-fit-cover" alt="描述文本">

<!-- 或者用object-fit-contain让图片完整显示，容器留白 -->
<img src="your-image.jpg" class="img-fluid h-100 object-fit-contain" alt="描述文本">

Bootstrap 5原生提供了object-fit-cover、object-fit-contain等工具类，无需额外写CSS，就能在所有现代浏览器（包括Safari）中保持图片比例。

方案2：用Flex布局居中图片，移除h-100 #

如果不想强制图片填充容器高度，可以给父容器添加Flex类，让图片自适应居中，自然维持宽高比：

<div class="aspect-ratio-16x9 d-flex align-items-center justify-content-center">
  <img src="your-image.jpg" class="img-fluid" alt="描述文本">
</div>

这种方式下，图片会根据容器的宽高比自动缩放，不会被强制拉伸，兼容性拉满。

方案3：手动给图片设置匹配的aspect-ratio #

如果必须保留h-100，可以给图片添加和父容器一致的aspect-ratio属性，给Safari明确的比例参考：

<!-- 内联样式示例 -->
<img src="your-image.jpg" class="img-fluid h-100" style="aspect-ratio: 16/9;" alt="描述文本">

<!-- 或者自定义CSS类 -->
<style>
  .img-aspect-16x9 {
    aspect-ratio: 16/9;
  }
</style>
<img src="your-image.jpg" class="img-fluid h-100 img-aspect-16x9" alt="描述文本">

这样Safari就能正确计算图片的宽高关系，避免拉伸。

内容的提问来源于stack exchange，提问作者PressingOnAlways