响应式图片容器max-height失效求助，需固定播放图标大小并居中

核心问题原因 #

你设置的padding-bottom: 57%是基于容器宽度的百分比计算，这个属性会强制容器高度随宽度同步放大，直接覆盖了max-height的限制，导致容器高度无限变大。

完整解决方案 #

1. 替换比例控制方式：用aspect-ratio替代padding-bottom，精准维持你需要的宽高比（从min/max值计算得比例为7:4，对应328/187=420/240=1.75）
2. 修正宽高约束：补全min-height、min-width的正确值，用width: min(100%, 420px)实现自适应且不超最大宽度
3. 播放图标居中固定：用绝对定位+transform实现居中，同时设置固定宽高保持大小不变

修改后的代码 #

HTML（修正多余的闭合标签）

<section>
  <div class="section-first-video responsive-wrapper">
    <img src="./resources/youtube-cover.png" alt="youtube-cover">
    <img class="play-icon" src="./resources/icon-play.svg" alt="play icon">
  </div>
</section>

CSS

section {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  column-gap: 20px;
  align-items: start;
  margin: 5% 4.4444%;
}

.section-first-video {
  position: relative;
  border-radius: 2rem;
  margin-bottom: 2rem;
  grid-column: col-start 1 / span 12;
  /* 核心修正：用aspect-ratio维持比例，替代padding-bottom */
  aspect-ratio: 7/4;
  /* 正确设置宽高约束 */
  min-width: 328px;
  min-height: 187px;
  max-width: 420px;
  max-height: 240px;
  /* 自适应宽度，不超过max-width */
  width: min(100%, 420px);
  overflow: hidden;
  /* 可选：让容器在grid中居中 */
  justify-self: center;
}

.section-first-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.section-first-video img.play-icon {
  /* 固定图标大小 */
  width: 60px;
  height: 60px;
  /* 居中定位 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 取消继承的object-fit */
  object-fit: contain;
}

关键说明 #

• aspect-ratio是现代浏览器支持的属性，能精准维持宽高比，不会像padding-bottom那样不受max-height限制
• width: min(100%, 420px)确保容器在屏幕宽度小于420px时自适应，大于时不超过最大宽度
• 播放图标用transform: translate(-50%, -50%)实现完美居中，同时固定宽高保证大小不变

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