Flexbox布局移动端图片上下留白问题求助

问题原因 #

移动端断点下，图片设置了width:100%和height:100%却无法填满容器，一是因为图片固有宽高比与容器比例不匹配，二是父级flex容器的align-items:center属性导致图片容器未被充分拉伸，最终出现上下留白。

解决方案 #

通过两步修改CSS即可解决：

1. 给图片添加object-fit:cover属性，让图片按比例覆盖整个容器，避免变形同时填满空间
2. 在移动端媒体查询中，将flex容器的align-items改为stretch，确保子容器占满可用高度

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #fff;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #F26922;
  background-color: #fff;
}

.section-v {
  background-color: #285473;
}

.flex-container-v {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.flex-left-v {
  padding: 0px;
  width: 50%;
}

.placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 添加该属性 */
}

.flex-right-v {
  padding: 0px;
  width: 50%;
}

.content-v {
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 20%;
  margin-bottom: 20%;
  text-align: center;
}

.h2-v {
  font-size: 32px;
}

.white-v {
  color: #fff!important;
}

a .button:link {
  background-color: #F26922;
  border: none;
  border-radius: 30px;
  color: #fff!important;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold!important;
  text-decoration: none!important;
}

a .button:hover,
a .button:active {
  background-color: white!important;
  border: none!important;
  border-radius: 30px;
  color: #F26922!important;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 900px) {
  .flex-right-v,
  .flex-left-v {
    flex: 100%;
  }
  .flex-container-v {
    align-items: stretch; /* 修改该属性 */
  }
  .content-v {
    margin: 10%;
  }
  .white-v {
    color: #fff!important;
  }
}

补充说明 #

• object-fit:cover会裁剪图片多余部分以填满容器，若希望完整显示图片可改用object-fit:contain，但此时可能出现左右留白，需根据需求选择
• 移除了.flex-left-v中多余的align-items:center属性（该容器并非flex容器，此属性无效）

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