Css 需要空div的背景图像在所有屏幕大小中以适当的比例显示

我有一个部分，最初只包含一个播放按钮，点击后会显示一个视频库。本节还必须包含一个图像，我决定将其作为

背景添加到本节本身（
#intro
）

问题是，由于除了播放按钮外，该部分中没有任何内容，因此背景没有被垂直拉伸到足以显示整个背景图像。我通过添加57.201%的
填充底部
来纠正这一问题。这在一开始就解决了问题，但我还必须将“播放”按钮放在中间，一旦我尝试使用边距和填充物进行操作，在调整浏览器大小后，由于我为
填充底部设置了百分比，图像底部显示了巨大的间隙，结果变得一团糟

所以，我需要这件事是响应，我希望设置一些断点，以及理想情况下，以满足用户的设备较小的屏幕

下面是一个屏幕截图，提供了一个更好的想法。单击中间的“播放”按钮时，一个视频库（
#feat video
）将在白色边框内弹出


HTML

我知道您没有要求使用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中添加相应的调用。这是我为您制作的一把小提琴，用于演示：
您是否尝试将#intro的高度和宽度设置为100%并移除底部填充物？@Doodlebunch是的，但高度没有改变，因为该部分中唯一的内容是播放按钮。如果有办法拉伸空div以匹配其背景图像，请尝试将宽度和高度设置为100vw和100vh。它是视口宽度和视口高度。兼容性。难道你不能只给带有白色轮廓线的部分没有背景，并使用图像作为身体背景吗？@Doodlebunch刚刚尝试过（谢谢，不知道存在），但是有没有办法设置图像的最大宽度？当我在大于1600px（图像宽度）的设备上测试站点时，它开始拉伸以适应视口。谢谢。我对使用JavaScript持开放态度。有没有办法在图像上设置一个最大宽度，使其不会水平延伸超过1600px？只需使用
媒体查询
，并将
背景大小
声明替换为所需的大于1600px的最大宽度。我似乎无法实现这一点。我是否保留我的原始CSS？我删除了
背景尺寸：封面
，
填充底部：57.201%
，并将其添加到您的函数中。但是，当我的浏览器最大化为1600宽时，div的高度显示比图像短（1600x915px是图像的大小，但图像显示为1583x802px），当我调整浏览器大小以测试响应性时，图像不会调整大小。我想1583px的宽度是由于浏览器上的滚动条造成的，也许这也影响了高度？不管怎样，为了解决这个问题？我关掉了代码，现在图像下面有一个空白，只显示div的背景色。另外，当我调整浏览器大小时，图像仍然不能与新浏览器的大小成比例地适应。它只是保持不变的大小。我检查了你的小提琴，它也没有调整宽度。对不起，我解释得不清楚。我只是希望随着浏览器宽度的减小，图像的大小会相应地减小至
#简介
。
#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;
    }
}

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);