如何在Bootstrap Accordion中放置图片以避免溢出重叠？

问题原因 #

核心问题是图片异步加载导致的accordion高度计算错误：
Bootstrap Accordion的展开动画通过JS预先计算内容区域高度，再设置固定height值实现过渡。如果图片未加载完成，计算高度时图片占位高度为0，accordion展开后图片才加载，此时容器高度已固定，图片就会溢出重叠。而文本是即时渲染的，所以能正常撑开容器。

解决方法 #

方法1：给图片添加宽高属性 #

在<img>标签中声明原始宽高，让浏览器在图片加载前就能计算出正确占位高度，确保accordion计算高度时包含图片空间：

<img src="https://placehold.co/600x400" class="img-fluid" width="600" height="400" />

img-fluid类会自动让图片适配容器宽度，同时保留宽高比，不会拉伸变形。

方法2：用Bootstrap比例容器包裹图片 #

利用内置ratio类创建固定宽高比的容器，提前确定容器高度，避免图片加载后溢出：

<div class="ratio ratio-3x2"> <!-- 600x400对应3:2比例 -->
  <img src="https://placehold.co/600x400" class="img-fluid object-fit-cover" />
</div>

ratio-3x2维持3:2宽高比，object-fit-cover让图片在容器内居中裁剪，避免变形。

方法3：图片加载完成后刷新Accordion #

通过JS监听图片加载事件，手动触发Accordion重新计算高度，适合无法预先知道图片宽高的场景：

const accordionImg = document.querySelector('.accordion-item img');
const accordion = new bootstrap.Accordion(document.querySelector('.accordion'));

accordionImg.addEventListener('load', () => {
  accordion.refresh();
});

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