这是 HTML:
<div class="container">
<div class="wrapper">
<iframe src="...."></iframe>
</div>
</div>
包装器 div 具有 CSS: position:relative; 宽度: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;
我试图在窗口调整大小时保护 iframe 的纵横比 16:9,并保持其最大高度 100% - 67px calc(100% - 67px)。如何同时进行这两项操作?
最佳答案
我遇到了同样的问题。最后为包装器制作了另一个包装器以获得两者的效果。
内部包装器确保纵横比保持不变,因为 padding-bottoms 的值是根据宽度缩放的。 iframe 填充它的容器,外包装提供最大宽度,以便它在 865 像素后停止扩展。
.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;
}
}
}
关于html - 用最大高度填充底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35509945/