如何用CSS使Div在响应式父容器中保持宽高比并无溢出最大化显示

可以通过调整媒体查询条件并结合max-width/max-height属性实现需求，以下是修正后的代码：

CSS代码 #

.parent {
  width: 100vw;
  height: 100vh;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 避免子元素溢出时出现滚动条 */
}

.child {
  max-width: 100%;
  max-height: 100%;
  background: blue;
}

/* 窗口宽度 > 高度时，使用16/9横屏比例 */
@media (min-aspect-ratio: 1/1) {
  .child {
    aspect-ratio: 16/9;
  }
}

/* 窗口宽度 < 高度时，使用9/16竖屏比例 */
@media (max-aspect-ratio: 1/1) {
  .child {
    aspect-ratio: 9/16;
  }
}

HTML代码 #

<div class="parent">
  <video class="child"></video>
</div>

问题说明与解决方案原理 #

你之前的代码问题在于媒体查询的条件不符合需求：原代码仅在窗口宽高比≤9/16或≥16/9时才切换比例，而你需要的是只要窗口宽>高就用16/9，宽<高就用9/16。

修正后的代码逻辑：

1. 父容器设置为100vw×100vh，通过flex布局让子元素居中，overflow:hidden防止溢出内容显示滚动条。
2. 子元素通过max-width:100%和max-height:100%限制最大尺寸，确保不会超出父容器范围。
3. 利用媒体查询min-aspect-ratio:1/1（窗口宽≥高）和max-aspect-ratio:1/1（窗口宽≤高）自动切换子元素的宽高比，浏览器会根据设定的比例和最大尺寸自动计算子元素的最优大小，既保持比例又填满可用空间且无溢出。

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