求助：Flex布局实现背景图片时图片超出屏幕尺寸的问题

核心原因 #

图片默认会保留自身宽高比，设置flex:1后，flex容器虽会为每个图片分配均等空间，但图片若未限制自身尺寸并适配容器，就会因固有宽高比超出父容器范围。

修复代码 #

修改.painel样式，添加尺寸限制与适配规则：

<div class="pagina-registar">
  <img src="./images/scooter.jfif" class="painel" />
  <img src="./images/globo.jfif" class="painel" />
  <img src="./images/r2d2.jfif" class="painel" />
</div>

<style>
.pagina-registar {
  display: flex;
  width: 100vw;
  height: 100vh;
  /* 可选：防止容器内出现滚动条 */
  overflow: hidden;
}

.painel {
  flex: 1;
  /* 强制图片占满分配到的容器空间 */
  width: 100%;
  height: 100%;
  /* 保持图片比例并覆盖容器，裁剪超出部分 */
  object-fit: cover;
  /* 移除图片默认的inline间距 */
  display: block;
}
</style>

关键属性说明 #

• width:100% + height:100%：强制图片继承flex分配的空间尺寸
• object-fit:cover：保持图片宽高比的同时填满容器，超出部分自动裁剪（若需完整显示图片可改用object-fit:contain，但容器会留空白）
• display:block：消除图片作为inline元素自带的底部间距，避免容器高度被撑开
• overflow:hidden：给父容器添加后，彻底隐藏可能出现的超出内容

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