CSS弹性盒子如何保持iframe的正确纵横比

Question

CSS弹性盒子如何保持iframe的正确纵横比

4

在一个简单的应用程序中，我有一个嵌入式视频；图像比例为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，并保持宽高比？当“width”减少到保持比率所需的以下时，使用“padding-bottom: 56.25％;”（315/560）进行修复。填充物可以是宽度或高度，但仅限于一个方向，因此限制“max-width”不是一个好选择。似乎“flex”只在一个“flex-direction”（行或列）中更改。

- fcm

请确保代码能够正常运行，注意将高度重置为自动，正确关闭标签（iframe），并使用元素（例如伪元素）根据比例设置高度。例如：http://codepen.io/anon/pen/RagJjg。如果你的问题非常简短，且只有一个iframe，那么flex可能并不是必需的。 - G-Cyrillus

这是简化版本：页面相当复杂，包括菜单和其他一些内容。必须100％符合HTML5标准。谢谢。 - fcm

不知道为什么你被踩了，似乎我的上一条评论没有用，所以我猜可能有其他原因。注意：没有人投票关闭你的问题。尽管如此，我认为它有点太泛泛了 :) 不过你还是得到了答案。 - G-Cyrillus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MilkyTech · Accepted Answer

响应式 iframe：

将图片与你的 iframe 叠加，它将像图片一样自适应大小...

JSFiddle

HTML：

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