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宽度，那么{{1}会很好可以改为min-height，因为它现在是正确的高度吗？

Answer 1

我说如果图像是背景，那么它只是装饰＆＃34;因此，如果它稍微裁剪，它就不那么重要了。如果您的图片很重要，那么它就是＆＃34;内容的一部分＆＃34;您的页面，然后您应该使用标记来放置它。这样它就会自动增长。如果您仍想将图像显示为背景，则无法获得渲染高度，因此您必须进行一些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; }
然后你可以比较图像的比例和容器的比例，看它是更垂直还是更水平。
如果它更垂直，则它会裁剪侧面，如果它更加水平，则会裁剪顶部和底部。
当您知道这一点时，您可以更改容器的大小以适合图像的比例。

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时获取背景图像的新高度：封面？

2 个答案: