笔记本电脑(1366x768)下图片垂直重叠的CSS响应式问题求助

问题分析 #

在1366x768分辨率下，图片垂直重叠且页面出现垂直滚动，根源在于：

• 导航栏高度未固定，导致calc(50vh - 50px)的计算基准不准确
• 列表项（li）未设置高度约束，图片容器的max-height规则失效
• 图片自适应逻辑不合理，宽高比例失衡导致容器被撑高

具体修改方案 #

1. 固定导航栏高度，确保calc计算准确

给导航容器添加固定高度，避免内容变化破坏计算逻辑：

.n-container {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 绑定列表项与图片容器的高度约束

让列表项和图片容器共享同一高度限制，防止容器被图片撑高：

.nav-img {
  max-height: calc(50vh - 50px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.container ul li {
  list-style: none;
  flex: 0 0 calc(33.333333% - 20px);
  height: auto;
  max-height: calc(50vh - 50px);
  text-align: center;
  background-color: #bbb;
  padding: 0;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

3. 优化图片自适应规则

调整图片缩放逻辑，确保在容器内按比例填充，既不溢出也不过小：

.container ul li img {
  height: auto;
  width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover; /* 保持比例并裁剪多余部分，如需完整显示可改用contain */
  border-radius: 5px;
}

4. 移动端布局同步高度约束

确保移动端3行2列布局下高度规则一致：

@media screen and (max-width: 767px) {
  .container ul li {
    flex: 1 0 calc(50% - 20px);
    max-height: calc(50vh - 50px);
  }
}

修改后效果说明 #

• 1366x768分辨率下：图片容器高度被严格限制为视口高度的一半减去导航栏高度，图片按比例填充容器，无重叠和多余滚动
• 移动端：保持3行2列布局，图片自适应容器大小，不会出现消失或过小问题

内容的提问来源于stack exchange，提问作者R. Ralston