Question

这是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;

我正在尝试保护iframe的宽高比16：9，因为窗口调整大小并且还保持 100％ - 67px calc（100％ - 67px）的最大高度。我怎么能同时做这两个呢？

Answer 1

我有同样的问题。结束为包装器制作另一个包装器以获得两者的效果。

内包装确保保留纵横比，因为padding-bottoms'的值是从宽度缩放的。 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;
        }
    }
}

Answer 2

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

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

然后，您可以将max-height设置为您喜欢的任何内容。

Answer 3

解决方案是使用max-height: ___; overflow: hidden将整个内容包装在一个元素中。

Answer 4

假设您不想支持旧版浏览器，可以使用：

height: calc(100% - 67px);

并将其应用于您的容器。

底部填充最大高度

4 个答案: