如何用Flexbox排列图片、iframe与video并保持宽高比、实现等高同宽

异常拉伸的根因 #

出现元素大小不一、被强制拉高的问题，是两个浏览器默认规则叠加导致的：

• Flex容器默认开启align-items: stretch，会把所有子元素沿交叉轴方向强制拉满容器高度，不会保留元素自身的原始尺寸约束
• 三类媒体元素的尺寸计算逻辑存在差异：图片会自动遵循自身固有宽高比做适配，而原生video、嵌入的YouTube iframe属于替换元素，未加明确约束时会优先抢占可用空间，最终表现为视频宽度偏大、高度异常拉高。

实现步骤 #

1. 配置Flex容器基础规则 #

先给承载媒体的容器设定统一的尺寸基准，关闭默认的拉伸行为：

.media-container {
  display: flex;
  flex-wrap: nowrap;
  /* 关闭交叉轴默认拉伸 */
  align-items: flex-start;
  /* 设定所有元素的统一高度基准，可根据实际视觉需求调整数值 */
  height: 220px;
  /* 可选：设置元素间的统一间距 */
  gap: 10px;
}

2. 统一媒体元素的尺寸约束 #

给容器下的三类媒体元素设置一致的尺寸规则，保证所有元素宽高完全相同，同时不破坏媒体本身的正确宽高比：

.media-container > img,
.media-container > video,
.media-container > iframe {
  /* 让所有元素等比分摊容器宽度，不会出现宽度大小偏差 */
  flex: 1 1 0;
  /* 允许元素收缩到等分宽度，避免内容撑破容器边界 */
  min-width: 0;
  /* 高度完全匹配容器基准，保证所有元素高度一致 */
  height: 100%;
  /* 让媒体内容按照自身宽高比适配固定尺寸框，不会出现拉伸变形 */
  object-fit: cover;
  /* 清除替换元素的默认边框、内外边距，避免尺寸计算偏差 */
  border: 0;
  padding: 0;
  margin: 0;
}

3. 避坑提示 #

• 不要单独给某类媒体元素设置固定的width或height属性，否则会打断Flex的等分规则，导致元素尺寸参差不齐
• min-width: 0是必须添加的关键属性：Flex子元素默认的最小宽度值为自身内容宽度，不加这个规则很容易出现元素溢出容器的问题
• 上述规则会把iframe的外框尺寸和图片、video完全统一，不需要额外调整YouTube的嵌入参数；如果要避免内部播放内容变形，只需要保证YouTube播放器本身的宽高比和外框适配即可。

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