如何实现16:9比例的响应式图片与iframe视频并排布局？

我来帮你搞定这个问题！先看看你现有代码里的几个小问题：

• 重复定义了.imgt样式，虽然不影响但没必要；
• 你的iframe高度设成了55%，这会直接破坏16:9的比例；
• 用text-align: justify来做并排布局，在某些浏览器或者窗口尺寸下可能会出现奇怪的间距，不如用Flexbox来得稳定可靠。

下面是修正后的完整方案，保证两者尺寸一致、比例正确且完全响应式：

核心思路 #

• 用Flexbox作为外层容器，轻松实现并排布局，同时支持响应式换行；
• 图片和视频容器都设置相同的宽度，并且通过padding-bottom: 56.25%（对应16:9的比例，9÷16=0.5625）来维持固定宽高比；
• 图片使用object-fit保证不会拉伸变形；
• 视频iframe绝对定位填充整个容器，确保比例正确。

完整代码 #

CSS部分 #

.wrap {
  display: flex;
  gap: 20px; /* 图片和视频之间的间距，可按需调整 */
  flex-wrap: wrap; /* 窗口变小时自动换行 */
  padding: 10px;
}

.media-item {
  flex: 1 1 calc(50% - 10px); /* 平分宽度，减去一半的gap间距 */
  min-width: 300px; /* 最小宽度，防止过小影响观看 */
  position: relative;
  padding-bottom: 56.25%; /* 16:9比例的核心实现 */
  height: 0;
  overflow: hidden;
}

.media-item img,
.media-item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片保持比例填充容器，若想完整显示图片可换成contain */
}

HTML部分 #

<div class='wrap'>
  <div class="media-item">
    <img src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='风景图片'>
  </div>
  <div class="media-item">
    <iframe src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

代码解释 #

1. .wrap容器：用display: flex开启弹性布局，gap设置元素间的间距，flex-wrap: wrap让小屏幕下自动换行，保证移动端体验；
2. .media-item类：统一图片和视频的容器样式，flex: 1 1 calc(50% - 10px)表示在空间允许时平分宽度，空间不足时缩小到min-width后换行；padding-bottom: 56.25%是实现16:9比例的关键，通过占位的padding来维持高度，避免元素变形；
3. 图片和iframe：绝对定位填充整个容器，图片用object-fit保证比例，iframe直接占满容器就能完美适配16:9的比例。

这样调整后，不管窗口怎么缩放，图片和视频都会保持相同的16:9比例，并排显示且尺寸一致，完全满足你的需求~

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