为何Wrapper无法突破特定高度扩展？3:2比例图片布局溢出问题

• 核心问题
  宽屏时图片溢出容器，是因为你没有给容器或图片设置明确的宽高比约束规则。仅依赖图片自身比例的话，当容器宽度足够大，浏览器无法自动根据宽度计算出符合3:2比例的高度，导致图片高度失控溢出。

• 两种可行的3:2比例实现方案
  方案一：利用padding-top百分比实现比例约束（兼容旧版浏览器）

  .side-by-side-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%; /* 限制容器不超出视口 */
    padding-top: 66.67%; /* 3:2比例 = 2/3 * 100% */
  }
  
  .side-by-side-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* 两张图片各占容器一半宽度 */
    height: 100%; /* 填满容器的比例高度 */
    object-fit: cover; /* 保持图片比例，裁剪多余部分；需完整显示用contain */
  }
  

  方案二：使用aspect-ratio属性（现代浏览器推荐）
  这种方式不需要绝对定位，图片能正常占据文档流，自然推挤下方元素：

  .side-by-side-wrapper {
    display: flex;
    gap: 12px; /* 可选，设置图片间的间距 */
    width: 100%;
    max-width: 100%;
  }
  
  .side-by-side-wrapper img {
    flex: 1; /* 两张图片平分容器宽度 */
    aspect-ratio: 3/2; /* 直接指定3:2比例 */
    object-fit: cover; /* 维持图片比例 */
    width: 100%; /* 确保图片填满分配的宽度空间 */
  }
  

• 关于max-height无效的原因
  max-height: none只是取消了容器的高度上限，但没有给浏览器提供高度计算的依据。只有明确了宽高比的关联规则，浏览器才能根据当前宽度自动算出符合比例的高度，避免溢出。

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