HTML/CSS新手求助：如何实现可水平添加图片的图片滑块？

问题根源 #

• HTML结构错误：第二个卡片容器被错误嵌套在第一个卡片内部，导致新卡片无法横向排列
• CSS类名不匹配：CSS定义的容器类是.services-container，但HTML里写的是.service-container，flex布局完全没生效
• 图片裁切问题：object-fit: cover会强制裁切图片以填满容器，若要完整展示图片需调整属性

修复方案 #

1. 修正HTML结构 #

所有卡片必须放在同一个顶级容器下，禁止嵌套容器结构，保证flex布局能横向排列所有卡片

2. 统一类名 #

确保CSS和HTML中的容器类名完全一致，让flex布局生效

3. 调整图片适配方式 #

根据需求修改object-fit属性：

• object-fit: cover：保持比例裁切填充（适合需要填满容器的场景）
• object-fit: contain：完整显示图片，容器留白（适合需要展示完整图片的场景）
• object-fit: scale-down：自动选择最优方式，优先完整显示

修正后的CSS代码 #

.services {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.services-container {
  padding: 0 10vw;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 40px; /* 用gap替代margin-right，更简洁可控 */
}

.services-container::-webkit-scrollbar {
  display: none;
}

.service-card {
  flex: 0 0 auto; /* 固定卡片宽度，不拉伸不收缩 */
  width: 300px;
  height: 450px;
  text-align: center;
}

.service-image {
  position: relative;
  overflow: hidden;
  height: 350px;
  width: 100%;
  border-radius: 8px; /* 可选，和示例图风格统一 */
}

.service-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 改为contain避免裁切，按需调整 */
}

.service-info {
  margin-top: 12px;
}

.service-name {
  margin: 0;
  font-size: 1.2rem;
}

.service-desc {
  margin: 8px 0 0;
  color: #666;
}

修正后的HTML代码 #

<section class="services">
  <button class="pre-btn"> <img src="image/arrow.png" alt="上一张"></button>
  <button class="next-btn"> <img src="image/arrow.png" alt="下一张"></button>
  <div class="services-container">
    <!-- 卡片1 -->
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiacne.jpg" class="service-thumb" alt="祛痘护理">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti Acne</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
    <!-- 卡片2 -->
    <div class="service-card">
      <div class="service-image">
        <img src="image/antiageing.jpg" class="service-thumb" alt="抗老护理">
      </div>
      <div class="service-info">
        <h2 class="service-name">Anti Aging</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
    <!-- 可继续添加更多卡片 -->
    <div class="service-card">
      <div class="service-image">
        <img src="image/another-service.jpg" class="service-thumb" alt="其他护理">
      </div>
      <div class="service-info">
        <h2 class="service-name">Another Service</h2>
        <p class="service-desc">Description</p>
      </div>
    </div>
  </div>
</section>

额外优化说明 #

• 用flex: 0 0 auto固定卡片宽度，避免flex布局下的意外拉伸/收缩
• 用gap替代margin-right，避免最后一张卡片出现多余间距
• 补充了文字区域的基础样式，让排版更整洁
• 添加图片alt文本，提升页面可访问性

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