Flexbox：匹配元素的高度，同时保持长宽比

我在柔性容器中有两个相邻的盒子。一个包含一个iframe，另一个包含一个表单。我希望iframe框匹配表单框的高度，并使iframe框保持16：9的宽高比。Flexbox：匹配元素的高度，同时保持长宽比

我无法获得旧的padding-bottom: 56.25%技巧，因为它基于宽度，这对Flexbox来说非常棘手。

这里有一个逼近我的HTML和（S）的CSS的小提琴，如果你想刺激这个问题。 https://jsfiddle.net/7zgh88ew/

如果有人有任何想法，他们将不胜感激！

2017-04-03 Koen

我认为你将不得不使用JS这一点。 –

通过使用inline-flex和虚拟img有正确的比例，将其设置为visibility: hidden，然后定位iframe绝对的，它的工作原理，仅适用于Chrome了，所以必须有一些问题，与其他浏览器，img没有正确确定其父母的大小。

我会自己发表一个问题，看看有人对此有所了解，并在知道更多时更新此帖。

更新

对于一个固定的高度，即200px，一个可以将它设置在.container并添加height: 100%到.iframe，它会在其他浏览器（solution provided by Tunçel Mert）工作

不过，如果form-content的大小基于其内容，但它仍然只能在Chrome上运行。

Fiddle demo

栈片断

.container { 
 
    display: inline-flex; 
 
    height: 200px; 
 
} 
 

 
.iframe { 
 
    position: relative; 
 
    height:100%; 
 
    background: red; 
 
} 
 
    .iframe img { 
 
    height:100%; 
 
    visibility: hidden; 
 
    } 
 
    .iframe iframe { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    } 
 

 
.form { 
 
    background: orange; 
 
} 
 

 
.fake-form-content { 
 
    width: 200px; 
 
}

<div class="container"> 
 
    <div class="iframe"> 
 
    <img src="http://placehold.it/160x90"> 
 
    <!-- Sorry about the video --> 
 
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" width="320" height="180"></iframe> 
 
    </div> 
 
    <div class="form"> 
 
    <div class="fake-form-content"> 
 
     Fake form content 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-04-03 12:27:55 LGSon

Flexbox：匹配元素的高度，同时保持长宽比

回答

相关问题