填充底部，最大高度

这里的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

填充底部，最大高度

回答

相关问题