填充底部,最大高度
问题描述:
这里的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)。我怎么能在同一时间做这两个?
答
假设你并不想支持您可以使用旧的浏览器:
height: calc(100% - 67px);
而且将此您的容器。
+1
但我需要它来维持宽高比16:9 –
答
而不是使用填充设置高度,将高度设置为视口宽度:
height: 56.25vw; /* 16:9 */
然后,您可以设置为任何你喜欢的最大高度。
答
我有同样的问题。结束了为包装获得另一个包装的效果。
内部包装确保纵横比保持不变,因为填充底部的值从宽度缩放。 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;
}
}
}
请提供iframe的链接,并解释更多,如果你能 – Microsmsm