如何在横向媒体滚动器中添加文本时防止图片缩放

问题描述：
制作可点击切换图片组的横向媒体滚动器时，添加图片下方的文本段落会导致图片缩放，且文本内容越多，图片缩放越明显。期望实现：无论文本量多少，浏览器窗口调整时所有图片均匀收缩缩放；新增文本仅增加容器高度，不影响宽度。无段落标签时，图片缩放比例正常。

问题原因 #

当前group使用Grid布局但未指定固定列宽分配规则，Grid会根据子元素（media-element）的内容长度自动分配宽度，导致文本多的media-element宽度更大，进而图片被拉伸/缩放程度不同。

解决方案 #

修改CSS，强制每个media-element平分宽度，同时确保文本换行不撑宽容器：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: gray;
}
.media-scroller {
  margin: 0 14rem;
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-radius: 10px;
}
.group {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  /* 关键：让每个media-element平分宽度 */
  grid-auto-columns: 1fr;
}
.media-element {
  display: grid;
  grid-template-rows: min-content;
  gap: 0.8rem;
  padding: 0.5rem;
  background-color: #1a1a1a;
  border-radius: 10px;
  /* 确保占满网格项宽度 */
  width: 100%;
}
.snaps-inline {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 0.3rem;
}
.snaps-inline > * {
  scroll-snap-align: start;
}
img {
  width: 100%;
  border-radius: 10px;
  /* 保持图片比例 */
  object-fit: cover;
}
p {
  padding: 1rem;
  color: #5799ef;
  font-size: 1.4rem;
  background-color: #2c2c2c;
  border-radius: 10px;
  /* 强制文本换行，避免撑宽容器 */
  overflow-wrap: break-word;
}

修改说明 #

1. .group添加grid-auto-columns: 1fr：让每个media-element自动平分当前group的宽度，不受内容影响；
2. .media-element添加width: 100%：确保子元素占满网格分配的宽度；
3. img添加object-fit: cover：保证图片缩放时保持比例，避免变形；
4. p添加overflow-wrap: break-word：长文本自动换行，不会横向撑宽容器。

修改后，所有图片会均匀响应窗口缩放，文本仅纵向扩展容器高度，不会影响横向宽度。

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