仅用CSS实现轮播图时添加图片说明及最后一屏被截断问题求助

问题1：最后一张轮播图被截断的原因及修复 #

• 核心原因1：动画总时长不匹配。当前设置动画总时长为46s，10张图每张延迟5s触发，最后一张在45s才开始显示，仅1s后就触发动画循环，所以看起来刚出现就被截断。
• 核心原因2：图片高度自适应导致溢出。给img设置了height: auto，如果原图高度换算后超过容器300px的高度，就会被外层的overflow: hidden截断底部内容。
• 修复方案：
  1. 把动画总时长改为50s（10张×每张5s展示时长）
  2. 调整keyframes的百分比适配10张图的轮播逻辑，让每张图稳定显示5s
  3. 给img添加object-fit: cover，宽高都设为100%，强制适配容器尺寸，避免溢出

问题2：添加轮播图片说明文本的实现方法 #

需要先调整HTML结构，把每张图片和对应的说明文本包裹在同一个独立的轮播项容器中，把原来绑定在img上的动画逻辑转移到这个容器上，让图片和文本同步显隐即可。

修改后的完整代码 #

HTML代码

<html>
<head>
<link rel="stylesheet" href="style3.css">
</head>
<body>

<div class="fling-minislide">
  <div class="slide-item">
    <img src="20190417_011307.jpg" alt="Slide 10" />
    <p class="slide-caption">这里写第10张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20190417_203230.jpg" alt="Slide 9" />
    <p class="slide-caption">这里写第9张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20190420_121746.jpg" alt="Slide 8" />
    <p class="slide-caption">这里写第8张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20190428_174640.jpg" alt="Slide 7" />
    <p class="slide-caption">这里写第7张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20200103_142544.jpg" alt="Slide 6" />
    <p class="slide-caption">这里写第6张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20200104_142904.jpg" alt="Slide 5" />
    <p class="slide-caption">这里写第5张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20200411_135421.jpg" alt="Slide 4" />
    <p class="slide-caption">这里写第4张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20201016_132909.jpg" alt="Slide 3" />
    <p class="slide-caption">这里写第3张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20201225_070106.jpg" alt="Slide 2" />
    <p class="slide-caption">这里写第2张图的说明文字</p>
  </div>
  <div class="slide-item">
    <img src="20210416_193029.jpg" alt="Slide 1" />
    <p class="slide-caption">这里写第1张图的说明文字</p>
  </div>
</div>
</body>
</html>

CSS代码

.fling-minislide {
  width:350px; 
  height:300px; 
  overflow:hidden; 
  position:relative; 
}
/* 轮播项容器，绑定动画逻辑 */
.fling-minislide .slide-item {
  position:absolute; 
  animation:fling-minislide 50s infinite; 
  opacity:0; 
  width: 100%; 
  height: 100%;
}
/* 图片适配容器 */
.fling-minislide .slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 说明文本样式，可自行修改配色、位置、字号 */
.fling-minislide .slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 12px 15px;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 14px;
}

@keyframes fling-minislide {
  /* 0-10%渐显，10%-20%保持显示，20%之后渐隐，适配10张图的轮播节奏 */
  10%{opacity:1;} 
  20%{opacity:0;}
}
/* 按顺序设置动画延迟，每张间隔5s */
.fling-minislide .slide-item:nth-child(10){animation-delay:0s;}
.fling-minislide .slide-item:nth-child(9){animation-delay:5s;}
.fling-minislide .slide-item:nth-child(8){animation-delay:10s;}
.fling-minislide .slide-item:nth-child(7){animation-delay:15s;}
.fling-minislide .slide-item:nth-child(6){animation-delay:20s;}
.fling-minislide .slide-item:nth-child(5){animation-delay:25s;}
.fling-minislide .slide-item:nth-child(4){animation-delay:30s;}
.fling-minislide .slide-item:nth-child(3){animation-delay:35s;}
.fling-minislide .slide-item:nth-child(2){animation-delay:40s;}
.fling-minislide .slide-item:nth-child(1){animation-delay:45s;}

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