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

Question

我在 CSS 中使用 background-size: cover;，虽然它运行良好，但我注意到一旦它“启动”，那么您可能会遇到背景图像的整个 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

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

Answer 2

我会说如果图像是背景，那么它只是“装饰”，因此是否裁剪一点并不重要。如果您的图像很重要，那么它是您页面“内容”的一部分，那么您应该使用标签来放置它。这样它就会自动生长。 如果您仍想将图像显示为背景，则无法获得渲染高度，因此您必须进行一些javascript计算：

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

   var height, width, proportion; var img = new Image(); img.src = imageurl; img.onload = function(){ height = img.height; width = img.width; proportion = width/height; }

2. 然后可以对比一下图片的比例和容器的比例，看是更垂直还是更水平。

3. 如果更垂直，则裁剪侧面，如果更水平，则裁剪顶部和底部。
4. 知道这一点后，您可以更改容器的大小以适应图像的比例。

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