两个 iframe（不同尺寸）并排响应

Question

我正在尝试添加一个响应式布局，其中并排放置了两个 iframe（视频 (16:9) 和图片 (1:1)）。我设法以某种方式搜索了一种使布局响应的代码，我现在面临的唯一问题是我无法使视频具有与第二个 iframe 相同的高度（图像一），并且同时保持其宽高比（16:9 因为它是 youtube 视频）。

我现在拥有的（带代码的演示）：http://jsfiddle.net/dzw8jx4e/

HTML代码：

<div class="t_container">
  <div class="ts_iframe">
  <iframe frameborder="0" height="250" width="100%" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
  </div>

  <div class="tc_iframe">
  <iframe frameborder="0" height="250" width="250" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
  </div>
</div>

CSS代码：

.t_container{
    display: inline-table;
    width: 100%; 
    }
    .ts_iframe{
    display: table-cell;
    width: 100%; 
    }
    .tc_iframe{ 
    width: 250px;
    float:right;
    }

@media (max-width: 768px) {
    .t_container { display: block; }
    .t_container .tc_iframe { display: block; width: 100%; float:none; }
}

Answer 1

如果不是因为复杂的自定义 table 逻辑（或者即使那样，考虑到一些 flexbox 经验），我会为这种工作推荐 flexbox 显示样式。它针对响应能力和自动处理一些粗糙 html 边缘进行了非常优化。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

你可以通过这个游戏来感受一下

https://flexboxfroggy.com/

这是您的代码，我刚刚删除了与 table 相关的所有特定样式，并仅保留 yt 视频中的 display: block 以使它们出现在媒体查询之外的不同行上（注意：在 flex 中，通过在父容器上强制 flex-direction: column 更容易获得）

http://jsfiddle.net/kctda2vr/1/

干杯，如果有什么遗漏，请告诉我。

Answer 2

保持宽高比的一种旧方法是使用 padding-top 百分比，因为它会根据可用宽度进行计算。这是一个例子：

body {
  margin: 0;
}

.t_container::after {
  clear: both;
}

.t_iframe {
  position: relative;
  float: left;
}

.t_iframe iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.t_video {
  width: 64%;
  padding-top: 36%;
}

.t_image {
  width: 36%;
  padding-top: 36%;
}

@media (max-width: 768px) {

  .t_iframe {
    float: none;
    width: 100%;
  }

  .t_video {
    width: 100%;
    padding-top: 36%;
  }

  .t_image {
    width: 100%;
    padding-top: 100%;
  }

}

<div class="t_container">
  <div class="t_iframe t_video">
    <iframe frameborder="0" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
  </div>

  <div class="t_iframe t_image">
    <iframe frameborder="0" scrolling="no" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
  </div>
</div>

也在 JSFiddle.

两个 iframe（不同尺寸）并排响应

Two iframes(Different Sizes) side by side responsive

html

javascript

css

responsive