如何移除HTML页面中infra-col模块的多余空白区域？

请帮我移除这个空白区域，我需要将页面上传至网站，尝试了各种方法都无效。我首先尝试修改infra-col的height为50%，但没有效果。通过Chrome审查元素发现infra-col存在整块空白区域，请提供移除该空白或缩小该区块尺寸的方法。

问题原因 #

你的代码里.infra-col设置了固定的block-size: 400px，但内部的img和.layer仅占容器高度的60%，剩余40%形成了空白区域；另外img设置display: flex属于多余属性，可能引发额外布局问题。

解决方案 #

• 移除.infra-col的固定高度，让容器自适应图片高度；若需要固定高度，可设置为与图片实际匹配的值或fit-content。
• 将img的display改为block，消除图片默认inline元素带来的底部间距。
• 若需要.layer覆盖整个容器，将其height改为100%，同时调整hover时标题的垂直居中效果。

修改后的CSS代码 #

.row {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}

.infrastructure {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
}

.infra-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  /* 移除固定高度，容器自适应内容 */
  /* block-size: 400px; */
}

.infra-col img {
  width: 100%;
  display: block; /* 改为block消除底部间距 */
  height: auto; /* 保持图片原比例，也可设置固定高度如300px */
}

.layer {
  background: transparent;
  height: 100%; /* 覆盖整个容器高度 */
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}

.layer:hover {
  background: rgba(226, 0, 0, 0.7);
}

.layer h3 {
  width: 100%;
  font-weight: 500;
  color: #fff;
  font-size: 26px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  opacity: 0;
  transition: 0.5s;
}

.layer:hover h3 {
  bottom: 50%;
  opacity: 1;
  transform: translate(-50%, 50%); /* 实现垂直居中 */
}

可选固定高度方案 #

如果需要固定容器高度，可调整为以下代码，确保图片填满容器且保持比例：

.infra-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  block-size: 300px; /* 设置合适的固定高度 */
}

.infra-col img {
  width: 100%;
  display: block;
  height: 100%; /* 图片填满容器高度 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

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