两个iframe大小不同并排响应

问题描述

我正在尝试并排添加两个iframe（视频（16：9）和图像（1：1））的自适应布局。我设法设法找到一种使布局具有响应性的代码，我现在面临的唯一问题是我无法使视频具有与第二个iframe相同的高度（图一），并且同时保持其长宽比（因为它是youtube视频，因此为16：9）。

我现在所拥有的（带有代码的演示）：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; }
}
    

解决方法

如果不是为复杂的自定义表逻辑而设计的（或者甚至没有，鉴于某些flexbox的经验），我将为这种工作推荐flexbox显示样式。对于响应速度和自动处理一些粗糙的html边缘，它进行了非常优化。

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

您可以在这款游戏中体会到

https://flexboxfroggy.com/

这是您的代码，我刚刚删除了与表格相关的任何特定样式，并仅将display: block保留在yt视频上，以使它们显示在媒体查询之外的其他行上（请注意：flex中的此代码更容易获得通过在父容器上强制flex-direction: column

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

干杯，让我知道是否缺少某些东西。

,

保持长宽比的一种旧方法是使用百分比的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上。