固定宽度图片轮播（Carousel）的文本自适应位置问题

现有一个宽度为1200px的轮播组件（Carousel），采用Grid Areas实现图片与文本叠加（未使用position: relative/absolute定位），基于scroll-snap模块实现轮播功能。需求为容器宽度缩小时文本自动左移，但当前文本会出现截断，而非响应式移动。注：代码中的max-width:981px断点仅为示例，问题出现在该断点之前（如宽度1120px时）。

问题根源 #

每个.item元素未设置响应式宽度，默认继承内部图片的原始宽度（1200px）。当容器宽度小于1200px时，.item无法自适应容器宽度，导致文本的justify-self: end定位基准仍为1200px，超出容器范围后被截断。

修复方案 #

1. 给.item添加width: 100%，使其自适应父容器宽度
2. 给内部图片添加width: 100%; height: auto，确保图片随容器宽度缩放并保持比例
3. 保留原有Grid Areas叠加逻辑与scroll-snap轮播功能

修改后的CSS代码 #

.carousel {
  display: grid;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  grid-auto-flow: column;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  grid-template-areas: 'item-1 item-2 item-3';
}

.carousel .item {
  display: grid;
  scroll-snap-align: center;
  width: 100%; /* 让item自适应容器宽度 */
}

.carousel .item-1 {
  grid-area: item-1;
  grid-template-areas: 'first';
}

.carousel .item-2 {
  grid-area: item-2;
  grid-template-areas: 'second';
}

.carousel .item-3 {
  grid-area: item-3;
  grid-template-areas: 'third';
}

.carousel .item-1 .image {
  grid-area: first;
  width: 100%; /* 图片自适应item宽度 */
  height: auto; /* 保持图片比例 */
}

.carousel .item-2 .image {
  grid-area: second;
  width: 100%;
  height: auto;
}

.carousel .item-3 .image {
  grid-area: third;
  width: 100%;
  height: auto;
}

.carousel .item-1 .text {
  grid-area: first;
  align-self: center;
  justify-self: end;
}

.carousel .item-2 .text {
  grid-area: second;
  align-self: center;
  justify-self: end;
}

.carousel .item-3 .text {
  grid-area: third;
  align-self: center;
  justify-self: end;
}

修改后的HTML代码（结构无需调整） #

<section class="carousel">
  <div class="item item-1">
    <picture class="image">
      <source srcset="https://placehold.co/800x732" media="(max-width: 981px)" width="800" height="732" />
      <img src="https://placehold.co/1200x732" alt="" width="1200" height="732" />
    </picture>
    <div class="text">
      Lorem ipsum dolor sit amet
    </div>
  </div>

  <div class="item item-2">
    <picture class="image">
      <source srcset="https://placehold.co/800x732" media="(max-width: 981px)" width="800" height="732" />
      <img src="https://placehold.co/1200x732" alt="" width="1200" height="732" />
    </picture>
    <div class="text">
      Lorem ipsum dolor sit amet
    </div>
  </div>

  <div class="item item-3">
    <picture class="image">
      <source srcset="https://placehold.co/800x732" media="(max-width: 981px)" width="800" height="732" />
      <img src="https://placehold.co/1200x732" alt="" width="1200" height="732" />
    </picture>
    <div class="text">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</section>

效果说明 #

• 设置.item为width:100%后，其宽度会跟随父容器（.carousel）的当前宽度动态变化，文本的justify-self: end定位基准随之调整，自然随容器缩小左移
• 图片的自适应设置避免了溢出问题，同时保留了原有响应式断点逻辑
• 原有Grid Areas叠加效果与scroll-snap轮播功能完全保留

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