填充底部，最大高度

這裏的HTML：填充底部，最大高度

<div class="container"> 
    <div class="wrapper"> 
     <iframe src="...."></iframe> 
    </div> 
</div>

的包裝div有CSS：位置：親屬; 寬度：100％; 身高：100％; 身高：0; 填充底：56.25％; 溢出：隱藏;

iframe的有CSS：

position: absolute; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
border: 0;

容器具有CSS：

position: relative; 
width: 100%; 
height: 100%; 
display: flex; 
flex-direction: column; 
justify-content: center; 
margin: 0 auto; 
top: 50%; 
transform: translateY(-50%); 
max-width: 1280px; 
max-height: 720px;

我試圖保護寬高比16：iframe的作爲調整窗口大小，並保持9它的最大高度爲100％ - 67px calc（100％ - 67px）。我怎麼能在同一時間做這兩個？

來源

2016-02-19 Brown KL

請提供iframe的鏈接，並解釋更多，如果你能 – Microsmsm

-2

假設你並不想支持您可以使用舊的瀏覽器：

height: calc(100% - 67px);

而且將此您的容器。

來源

2016-02-19 16:35:30 MarkP

但我需要它來維持寬高比16：9 –

而不是使用填充設置高度，將高度設置爲視口寬度：

height: 56.25vw; /* 16:9 */

然後，您可以設置爲任何你喜歡的最大高度。

來源

2017-05-24 13:43:25 mcrider

我有同樣的問題。結束了爲包裝獲得另一個包裝的效果。

內部包裝確保縱橫比保持不變，因爲填充底部的值從寬度縮放。 iframe填充它的容器，並且外層包裝提供最大寬度，以便在865px之後停止展開。

.video-wrapper-wrapper { 
    max-width: 865px; 
    margin: auto; 

    .video-wrapper { 
     position: relative; 
     width: 100%; 
     height: 0; 
     padding-bottom: 82%; 

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

來源

2017-09-29 18:30:00 Wallace

填充底部，最大高度

回答

相關問題