2

我正在使用background-size: cover;in CSS，虽然它运行良好，但我注意到一旦它“启动”，那么您可能会遇到整个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为现在它的正确高度会很好？

4

2 回答 2

1

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

于 2015-05-12T08:51:38.160 回答
1

我假设你有背景的原始尺寸，如果不是这里是你如何得到它

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);
}
于 2015-05-12T09:24:38.470 回答