Question

我的iframe是显示尺寸的理想尺寸，但是padding-bottom似乎是使其高度与宽度成比例正确的唯一方法。但是，当我使用padding-bottom时，我的背景图像也会变大。我希望背景图片能覆盖75％的屏幕高度。

我添加了背景图片：

.showcase{
    background: #000 url(<?php echo get_theme_mod('showcase_image', get_bloginfo('template_url').'img/teun cf 2019.jpg') ?>) no-repeat left top;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.showcase img {
    flex-shrink: 0;
    max-width: 100%;
    max-height: 75%;            
}

以及对iframe的一些修改：

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

然后这就是将iframe集成到我的html文件中的方式：

<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="https://www.youtube.com/embed/f2svCLTf1u4?start=15"></iframe>
</div>

作为参考，页面显示如下：http://www.teunbuwalda.nl/the-neighbours/

padding-bottom中的.iframe-embed-responsive-16by9与我的背景图片有什么联系？

通过填充更改iframe大小会更改背景图片大小

0 个答案: