如何让CSS Grid布局的图片在移动端单列视图下自适应缩放？

你的问题出在Grid列宽设置为固定的788px，导致屏幕宽度不足时列不会自动收缩，图片只能按原尺寸显示进而被裁剪。以下是修正方案：

修正后的CSS #

.grid-test {
  display: grid;
  /* 用auto-fit + minmax实现响应式列宽：屏幕足够时每列788px，不足时占满可用宽度 */
  grid-template-columns: repeat(auto-fit, minmax(min(788px, 100%), 1fr));
  justify-content: center;
  /* 可选：添加列间距优化布局 */
  gap: 1rem;
}

/* 给图片加自适应样式，确保缩放时保持比例且不溢出容器 */
.grid-test img {
  width: 100%;
  height: auto;
  display: block;
  /* 可选：图片可点击时添加指针样式 */
  cursor: pointer;
}

修正后的HTML #

<div class="grid-test">
  <img src="1.jpg" alt="图片1">
  <img src="2.jpg" alt="图片2">
  <img src="3.jpg" alt="图片3">
  <img src="4.jpg" alt="图片4">
  <img src="5.jpg" alt="图片5">
  <img src="6.jpg" alt="图片6">
  <img src="7.jpg" alt="图片7">
  <img src="8.jpg" alt="图片8">
  <img src="9.jpg" alt="图片9">
</div>

关键说明 #

• repeat(auto-fit, minmax(min(788px, 100%), 1fr))：auto-fit自动调整列数，minmax(min(788px, 100%), 1fr)确保列宽最大为788px，当屏幕宽度小于788px时，列宽占满容器100%宽度，自然切换为单列布局。
• width: 100%; height: auto;：强制图片宽度匹配容器，高度按原比例自动缩放，避免裁剪或拉伸变形。

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