javascript - 使用 CSS background-size 时获取背景图像的新高度 : cover?

Question

我在CSS中使用background-size: cover;，虽然它运行良好，但我注意到一旦它“启动”，那么整个可能会出现问题不显示背景图像的高度。

例如，我有这样的代码:

#home .top {
    min-height: 768px;
    background: #fff url('../images/home-bg-lg.jpg') center top no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

现在，min-height: 768px; 指的是图像的实际高度，因此我设置它以确保无论内容如何，​​它始终显示完整高度；然而，显然一旦背景大小开始增加，高度也会增加，因此768px大小不再足够大，并且很多背景不会显示。

有没有办法用 CSS 来解决这个问题，如果没有，用 JavaScript 怎么样，最好是 jQuery？

如果只是一个 JavaScript/jQuery 解决方案，可能值得一提的是我使用断点并以较小的分辨率使用较小的背景图像；不需要对这些应用任何内容。

编辑:澄清一下，我想知道是否有可能在展开时始终显示图像的完整高度。例如，如果它使用 1600 x 768 的图像，并且有人以 1920 x 900 分辨率查看它，那么它会扩展到 1920px宽度，因此如果 min-height 可以更改为 922px 就好了，因为这就是它现在的正确高度？

Answer 1

我假设你有背景的原始尺寸，如果没有here's how you can get it

var bgw = 1600;
var bgh = 768;

function coverBg() {
    var el = $('#home .top');
    var elw = el.outerWidth();
    var elh = el.outerHeight();
    var newHeight = elw*bgh/bgw;
    el.css('height', newHeight);
}