如何让宝丽风堆叠图片幻灯片适配Bootstrap Card？

问题 #

将宝丽风堆叠图片幻灯片嵌入Bootstrap Card后，图片出现漂浮溢出容器的情况（如图：图片漂浮效果），需要让图片适配Card容器。

原嵌入代码：

<div class="card" style="width:100%">
  <div class="card-header">
    <h5><b>Image</b></h5>
  </div>
  <div class="card-body">
    <div class='images'> 
      <img class='image' src='https://unsplash.it/400/380/?random'> 
      <img class='image' src='https://unsplash.it/400/410/?random'> 
      <img class='image' src='https://unsplash.it/400/390/?random'> 
      <img class='image' src='https://unsplash.it/405/410/?random'> 
      <img class='image' src='https://unsplash.it/400/425/?random'> 
    </div>
  </div>
</div>

核心原因 #

原幻灯片的图片使用绝对定位或固定尺寸偏移，且.images容器未设置溢出限制，加上Bootstrap Card的card-body默认内边距，导致图片超出Card范围。

修复方案 #

步骤1：限制容器溢出范围 #

给.images容器添加相对定位和溢出隐藏，确保图片仅在容器内显示：

.images {
  position: relative;
  overflow: hidden;
  padding: 1rem; /* 适配Card内边距，避免图片贴边 */
  min-height: 350px; /* 根据图片高度设置，防止容器塌陷 */
}

步骤2：让图片适配容器宽度 #

修改.image的尺寸规则，使其不超过容器宽度：

.image {
  max-width: calc(100% - 2rem); /* 减去容器内边距，避免溢出 */
  /* 保留原幻灯片的定位和动画属性，仅调整尺寸 */
  position: absolute;
  top: 0;
  left: 0;
}

完整修改后代码 #

<div class="card" style="width:100%">
  <div class="card-header">
    <h5><b>Image</b></h5>
  </div>
  <div class="card-body">
    <div class='images'> 
      <img class='image' src='https://unsplash.it/400/380/?random'> 
      <img class='image' src='https://unsplash.it/400/410/?random'> 
      <img class='image' src='https://unsplash.it/400/390/?random'> 
      <img class='image' src='https://unsplash.it/405/410/?random'> 
      <img class='image' src='https://unsplash.it/400/425/?random'> 
    </div>
  </div>
</div>

<style>
.images {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  min-height: 350px;
}

.image {
  max-width: calc(100% - 2rem);
  position: absolute;
  top: 0;
  left: 0;
  /* 保留原幻灯片的动画、阴影等样式 */
}
</style>

额外提示 #

如果原幻灯片有JS控制的偏移动画，需要调整动画中的transform参数，确保图片移动时不会超出.images容器的范围。

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