css flex 保持 iframe 具有适当的纵横比

Question

在一个简单的应用程序中，我嵌入了一个视频；图像比例为 630/315：

    ...
    .flex-x{
         display:flex;
         flex-direction:row;   
         height:200px;
    }
    .flex-x iframe{
         display: 1 1 auto;
    }
    ...

    <div class="flex-x">
       <iframe width="560" height="315" src="..." />
    <div>

问题是 iframe 按预期增长和缩小，但只有一个轴，没有保持纵横比。

有什么方法可以增加/缩小 x 和 y，保持纵横比？使用padding-bottom: 56.25%; (315/560) 修复当“宽度”减小到保持比率所需的以下时。

padding的宽度或高度都可以，但只有一个，所以限制max-width不是一个好的选择。

看起来 flex 仅在一个 flex-direction （行或列）中发生变化。

Answer 1

响应式 iframe：

用您的 iframe 覆盖图像，它会像图像一样调整大小...

JSFiddle

HMTL：

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://placehold.it/16x9" />
    <iframe src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

CSS：

.wrapper {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  background: #CCC
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}