0

我有一个部分，最初只包含一个播放按钮，一旦点击就会显示一个视频库。该部分还必须包含一个图像，我决定将其包含在background该部分本身 ( #intro) 中。

问题在于，由于该部分中除了播放按钮之外没有任何其他内容，因此背景没有被垂直拉伸到足以显示整个背景图像。我通过包含padding-bottom57.201% 来解决这个问题。最初修复了它，但我还必须将播放按钮定位在中心，一旦我尝试使用边距和填充来做到这一点，它就会变得一团糟，在调整浏览器大小后，由于我的百分比，图像底部显示了巨大的间隙设置为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;
    }
}
4

1 回答 1

0

我知道您没有要求 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/

于 2014-09-08T09:44:39.493 回答