网格中重叠元素未遵循max-width:100%缩放的问题咨询

核心问题 #

CSS Grid容器默认会根据子元素的固有尺寸计算网格轨道宽度，而非优先遵循容器的max-width:100%。你的子元素（div设置了width:1600px、img带有width="1600"属性）的固定尺寸会强制网格轨道保持1600px宽度，导致窗口缩小时元素无法自适应。

修复步骤 #

1. 修改网格容器的轨道规则
   给容器添加grid-template-columns: 1fr，让网格轨道自动占满容器可用宽度，不再被子元素固有尺寸限制：

   .container {
     display: grid;
     max-width: 100%;
     grid-template-columns: 1fr; /* 新增这行 */
   }
   

2. 调整子元素的宽度设置

   • 对于.grid_item_1：把固定width:1600px改成max-width:1600px，既保留最大宽度限制，又能自适应容器宽度：

     .grid_item_1 {
       color: white;
       max-width: 1600px; /* 替换原width:1600px */
       height: auto;
       grid-area: 1 / 1;
       min-width: 0px;
     }
     

   • 对于图片.grid_item_2：添加width:100%确保CSS规则覆盖HTML的width属性，同时保持图片比例：

     .grid_item_2 {
       grid-area: 1/1;
       max-width: 100%;
       width: 100%; /* 新增，强制适配轨道宽度 */
       height: auto; /* 保持图片比例 */
     }
     

完整修复代码 #

CSS #

.container {
  display: grid;
  max-width: 100%;
  grid-template-columns: 1fr;
}

.grid_item_1 {
  color: white;
  max-width: 1600px;
  height: auto;
  grid-area: 1 / 1;
  min-width: 0px;
}

.grid_item_2 {
  grid-area: 1/1;
  max-width: 100%;
  width: 100%;
  height: auto;
}

HTML #

<div class="container">
  <div class="grid_item_1">
    Foo
  </div>
  
  <img class="grid_item_2" src="https://via.placeholder.com/1600">
</div>

（可选：若需保留图片原始最大尺寸，可将图片的max-width设为1600px，配合width:100%，实现窗口大于1600px时保持原图尺寸，缩小时自适应）

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