为flex容器添加align-items属性后图片消失的技术求助

问题原因 #

当给.container添加align-items属性（比如align-items: center）时，flex列布局下的直接子元素（.container > div）会默认收缩到内容宽度。你的16/9比例布局依赖伪元素的padding-bottom: calc(100% / (16/9))撑高，而这个百分比是基于元素自身宽度计算的——如果.container > div宽度收缩为0，伪元素高度也会变成0，导致绝对定位的图片失去支撑容器，看起来就像消失了。

解决方案 #

给.container > div设置宽度占满容器，让16/9比例容器能获取有效宽度，伪元素就能正常撑起高度，图片即可显示。有两种实现方式：

方案1：设置width: 100%

修改后的CSS代码：

.container {
     display: flex;
     flex-direction: column;
     background-color: #abbaea;
     width: 500px;
     height: 500px;
     justify-content: center;
     align-items: center; /* 添加你需要的align-items属性 */
}
 .container > div {
     background-color: #fbd603;
     width: 100%; /* 关键：让子元素占满容器宽度 */
}
 .container > div .aspect-ratio-16-by-9 {
     position: relative;
}
 .container > div .aspect-ratio-16-by-9 .media {
     position: relative;
     top: 0;
     left: 0;
     width: 100%;
}
 .container > div .aspect-ratio-16-by-9 > :first-child {
     width: auto;
     max-width: 100%;
}
 .container > div .aspect-ratio-16-by-9 > img {
     max-height: 100%;
}
 .container > div .aspect-ratio-16-by-9::before {
     content: "";
     display: block;
     padding-bottom: calc(100% / calc(16 / 9));
}
 .container > div .aspect-ratio-16-by-9 > :first-child {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: auto;
     max-height: 100%;
}

方案2：使用align-self: stretch

替代width:100%，让子元素自动占满flex容器横向空间：

.container > div {
     background-color: #fbd603;
     align-self: stretch; /* 自动撑满容器宽度 */
}

对应HTML代码（无需修改） #

<div class='container'>
  <div>
    <div class="aspect-ratio-16-by-9">
      <img class='media' src='https://i.ibb.co/4S4J60N/tree1000-1.png' />
    </div>
  </div>
</div>

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