基于Div+CSS的自动无限图片轮播异常求助：空白与图片不显示

问题根源分析 #

• 缺失动画关键帧：CSS里只写了animation: scroll 40s linear infinite;，但没定义@keyframes scroll规则，轮播的核心滚动逻辑缺失，导致播完一轮后出现空白跳转。
• 尺寸匹配错误：
  • .container高度设为250px，.profile却设了500px，加上place-items: center垂直居中，图片上下部分被容器的overflow: hidden裁剪，造成前几张（实际是所有图片的部分区域）无法显示。
  • .banner宽度计算错误：每个.profile实际宽度是150px（内容宽）+15px*2（左右padding）=180px，但代码里用calc(250px*12)计算总宽度，容器宽度和实际内容不匹配，引发空白区域。

修正后的完整代码 #

HTML代码（结构无需修改，确保图片路径正确即可） #

<div class="container">
  <div class="banner">
    <div class="profile">
        <img src="img1.png" alt="轮播图片1">
    </div>
    <div class="profile">
        <img src="img2.png" alt="轮播图片2">
    </div>
    <div class="profile">
        <img src="img3.png" alt="轮播图片3">
    </div>
    <div class="profile">
        <img src="img4.png" alt="轮播图片4">
    </div>
    <div class="profile">
        <img src="img5.png" alt="轮播图片5">
    </div>
    <div class="profile">
        <img src="img6.png" alt="轮播图片6">
    </div>
    <div class="profile">
        <img src="img1.png" alt="轮播图片1">
    </div>
    <div class="profile">
        <img src="img2.png" alt="轮播图片2">
    </div>
    <div class="profile">
        <img src="img3.png" alt="轮播图片3">
    </div>
    <div class="profile">
        <img src="img4.png" alt="轮播图片4">
    </div>
    <div class="profile">
        <img src="img5.png" alt="轮播图片5">
    </div>
    <div class="profile">
        <img src="img6.png" alt="轮播图片6">
    </div>
  </div>
</div>

CSS代码（修正尺寸与动画逻辑） #

.container{
  height: 250px;
  width: 90%;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.banner{
  position: absolute;
  white-space: nowrap;
  display: flex;
  /* 计算实际总宽度：每个profile宽度180px，共12个 */
  width: calc(180px * 12);
  animation: scroll 40s linear infinite;
}

.profile{
  /* 高度适配容器，避免图片被裁剪 */
  height: 250px;
  width: 150px;
  display: flex;
  align-items: center;
  padding: 0 15px; /* 仅保留左右padding，移除上下padding防止高度溢出 */
  box-sizing: border-box; /* 确保padding计入元素宽度 */
}

.profile img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，避免拉伸变形 */
}

/* 新增滚动动画关键帧，实现无缝循环 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 滚动距离为一组图片的总宽度，动画结束时刚好衔接复制的第二组图片 */
    transform: translateX(calc(-180px * 6));
  }
}

关键修正说明 #

1. 补全动画逻辑：通过@keyframes scroll定义从初始位置到滚动完一组图片的位移，因为banner里复制了一组相同图片，动画结束时刚好衔接，视觉上实现无限循环。
2. 统一尺寸适配：把.profile高度改为和容器一致的250px，移除上下padding，避免图片被裁剪；用box-sizing: border-box保证padding计入宽度，修正.banner的总宽度计算。
3. 优化图片显示：添加object-fit: contain确保图片比例正常，不会被拉伸变形。

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