需要空div的背景图像，以适当的比例显示所有屏幕尺寸

Question

我有一个部分，最初只包含一个播放按钮，一旦点击就会显示一个视频库。此部分还必须包含一张图片，我决定将其作为background添加到部分本身（#intro）。

问题在于，除了播放按钮之外，该部分中没有任何内容，因此背景不能垂直拉伸以显示整个背景图像。我通过包括padding-bottom 57.201％来解决这个问题。最初修复它但我还必须将播放按钮放在中间位置，一旦我尝试使用边距和填充，在调整浏览器大小后，由于百分比I，显示在图像底部的巨大间隙变得一团糟设为padding-bottom。

所以，我需要这个东西才能做出响应，我最好设置一些断点，以满足屏幕较小的设备上的用户。

这是一个提供更好主意的屏幕截图。单击中心的播放按钮时，应在白色轮廓矩形内弹出视频库（#feat-video）。

HTML

<section id="intro">
    <div class="section-wrap">
        <a class="video-toggle" href="#">Toggle</a>
        <div id="feat-video" style="display:none">
            (video gallery here)
        </div>
    </div><!-- .section-wrap -->
</section>

CSS

#intro {
    background: url("img/intro-banner.jpg") no-repeat center top $color__brand-blue;
    background-size: cover;
    padding-bottom: 57.201%;

    #feat-video {
        padding-top: 224px;
    }
}

Answer 1

我知道你没有要求使用javascript / jQuery解决方案，但你可以简单地将它用于完美的背景：

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

$('#intro').css('min-height', viewport().height);

<强>更新

如果你想保持调整大小的效果（通常你不需要，在页面加载时应该足够），你必须在jQuery中添加相应的调用。这是我为你演示的小提琴：http://jsfiddle.net/zgzt8dom/3/