如何实现slider单次仅显示一张图片？附问题代码求助

问题根源及修复步骤： #

• 容器宽度不匹配：你有4张图片，figure的宽度应该设为400%（每张图片占滑块容器100%宽度，4张总宽度就是容器的4倍），原代码里的300%不够，导致图片挤在一起。
• 图片尺寸冲突：HTML里的img标签直接写了width="50%" height="50%"，这会和CSS里的设置冲突，导致图片尺寸混乱；同时CSS里图片宽度设为20%，4张的话应该是25%（100%/4），这样每张刚好占满滑块容器宽度。
• 动画关键帧错误：keyframes里的left: -300;漏写了百分号，而且最后偏移到-400%会超出范围，4张图片的最大偏移量应该是-300%（显示第四张时，容器左移3倍自身宽度）。
• 高度设置不稳定：figure的height: 45%是相对父元素的百分比，建议换成固定高度或者基于图片比例的设置，避免高度异常。

修正后的代码： #

CSS部分：

#slider {
  overflow: hidden;
  width: 100%;
  max-width: 800px;
}

#slider figure {
  position: relative;
  width: 400%; /* 4张图片，总宽度是容器的4倍 */
  height: 300px; /* 固定高度，匹配图片比例 */
  margin: 0;
  left: 0;
  animation: 10s slider infinite;
}

#slider figure img {
  float: left;
  width: 25%; /* 4张平分400%宽度，每张占25% */
  height: 100%; /* 继承figure高度，保证填满容器 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

@keyframes slider {
  0% { left: 0; }
  20% { left: 0; } /* 停留显示第一张 */
  25% { left: -100%; } /* 切换到第二张 */
  45% { left: -100%; } /* 停留显示第二张 */
  50% { left: -200%; } /* 切换到第三张 */
  70% { left: -200%; } /* 停留显示第三张 */
  75% { left: -300%; } /* 切换到第四张 */
  95% { left: -300%; } /* 停留显示第四张 */
  100% { left: 0; } /* 回到第一张，循环更流畅 */
}

HTML部分：

<div id="slider">
  <figure>
    <img src="https://via.placeholder.com/600x300" alt="滑块图片1">
    <img src="https://via.placeholder.com/600x300" alt="滑块图片2">
    <img src="https://via.placeholder.com/600x300" alt="滑块图片3">
    <img src="https://via.placeholder.com/600x300" alt="滑块图片4">
  </figure>
</div>

额外说明： #

• object-fit: cover能保证图片按比例填充容器，不会出现拉伸变形的情况；
• 调整了动画关键帧的时间节点，让切换和停留的节奏更合理，最后回到初始位置而非超出范围，循环更自然；
• 给滑块容器添加max-width，避免在大屏幕上图片过宽影响观感。

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