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）修复“宽度”低于保持比率所需的宽度。

填充是宽度或高度，但只有一个，因此限制max-width不是一个好选择。

看起来只有flex flex-direction（行或列）中的{{1}}更改。

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%;
}

css flex以适当的宽高比保持iframe

1 个答案:

响应iframe：