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：匹配元素的高度，同時保持長寬比

回答

相關問題