在最大高度下填充底部

Question

这里是HTML代码：

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

包装器的CSS样式如下： position: relative; width: 100%; height: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;

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))。如何同时实现这两个目标？

- Brown KL

---

请提供 iframe 的链接并尽可能详细地解释。 - solimanware

使用padding-top技巧来实现宽高比不会考虑最大高度。您需要更改父元素的宽度。如果您在底部/顶部有导航栏并且宽高比溢出，则需要更改父元素的宽度。假设您的栏高度为50px，父元素宽度为100％，则需要将父元素更改为宽度为calc（100％-25px），即其高度的一半。 - Gabriel Linassi

Answer 1

我也遇到了同样的问题。最终，我创建了另一个包装器来同时实现两个效果。

内部包装器确保宽高比保持不变，因为padding-bottom的值是从宽度缩放的。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;
        }
    }
}

- Wallace

---

如果我想要全宽，也就是100vw怎么办？ - Ashik

Answer 2

不要使用填充来设置高度，而是将高度设置为视口宽度：

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

你可以将最大高度设置为任何你喜欢的值。

- mcrider

---

这只适用于全宽视口。% 取决于其容器，而 vw 则不然。另外，获取 56.25 的另一个公式是 calc(100% / (16/9))。只需将 16/9 替换为您想要的任何比例即可。 - corysimmons

Answer 3

解决方案是将整个元素包裹在一个带有max-height: ___; overflow: hidden的元素中。

- corysimmons