使用 CSS background-size: cover 时获取背景图片的新高度？

Question

我在 CSS 中使用 background-size: cover; 虽然它运行良好，但我注意到一旦它 "kicks in" 那么你可能会遇到整个问题 height 背景图片不显示。

例如，我有这样的代码：

#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; 指的是图像的实际高度，所以我设置它以确保无论内容如何，它始终显示完整高度；但是很明显，一旦背景尺寸开始增加，height 也会增加，因此 768px 尺寸不再足够大，很多背景都没有显示。

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

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

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

Answer 1

我会说如果图像是背景，那么它只是 "decoration"，因此是否裁剪一点并不重要。如果您的图片很重要，那么它是您页面 "content" 的一部分，那么您应该使用标签来放置它。这样它就会自动增长。如果你还想把图片显示为背景，你就得不到渲染高度，所以你得做一些javascript计算：

创建图片对象获取bg图片的宽高：

var height, width, proportion; var img = new Image(); img.src = imageurl; img.onload = function(){ height = img.height; width = img.width; proportion = width/height; }
那你可以对比一下图片的比例和容器的比例，看是更垂直还是更水平。
如果更垂直，则裁剪两侧，如果更水平，则裁剪顶部和底部。
知道这一点后，您可以更改容器的大小以适合图像的比例。

编辑：我个人的看法是，用 js 做这件事有点麻烦。在大多数情况下，最好使用标签或忘记那些裁剪部分。如果您认为图像的重要部分没有显示出来，也许您可以稍微玩一下 background-position，以确保始终显示图像的焦点。

Answer 2

我假设你有背景的原始尺寸，如果没有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);
}

使用 CSS background-size: cover 时获取背景图片的新高度？

Getting the new height of backround image when using CSS background-size: cover?

javascript

jquery

css

background-size