全屏幕背景图像（有点） - 没有裁剪？

我的客户想要的可能实际上是不可能的 - 他们希望全屏幕背景图像不会裁剪，并保留其尺寸。他们愿意接受白色空间，但他们希望图像尽可能地填满屏幕，而不会在任何轴上进行裁剪。我能够找到能够实现真正的整页背景的漂亮脚本，但他们不会接受任何图像裁剪。有任何想法吗？全屏幕背景图像（有点） - 没有裁剪？

来源

2011-11-21 lbholland

作出这样的瓷砖背景图像？ – stealthyninja

什么关于CSS背景封面？ – evuez

这不是不可能！你完全可以做到这一点。使用JQuery来查找浏览器视口的高度和宽度，并且瞧！将背景图像设置为该尺寸。如果您需要维护方面，请使用JQuery算法来计算宽度/高度，然后使用该比率来针对实际尺寸的比例进行基准测试，并且如果它更高/更低，则将背景图像的高度/宽度设置为100％，而其他尺寸不管实际比例会如何计算。

如果你的客户不关心滚动条就可以按照第三次尝试下这个指南： http://css-tricks.com/766-how-to-resizeable-background-image/并设置为任何需要的HTML/body元素的最小高度要根据背景的宽度图片。我希望这一切都能帮助你找到想要做什么的想法。

来源

2011-11-21 19:49:58 victoroux

我尝试了css-tricks（第三个）中列出的CSS技术，但它在任何轴不受限制的情况下裁剪。我所尝试的所有技术都需要裁剪。我想我需要使用Jquery方法..试图避免它，因为我并不那么出色。你熟悉的那些使用jQuery的已发布方法？ – lbholland

使用JQuery，您可以简单地使用$（window）.width（），我相信您可以使用相同类型的函数来获取高度。使用这两个来查找浏览器窗口的纵横比，然后从那里选择背景图像的哪个（高度或宽度）应该最大化以填充屏幕，然后设置背景图像的宽度。我不记得背景图片的高度是否可以在CSS中设置，但是您可以将div元素设置为您的“body”，并将其高度设置为浏览器heigt并将其设置为显示：fixed并保留它为z -index低于其他一切 – victoroux

另外，正如我所说的，如果你的客户不关心有没有俗气的滚动条，你可以将HTML/body的最小高度设置为通过滚动显示整个图像所需的高度。但是，您可能还需要先使用JQuery来计算浏览器的宽度 – victoroux

HTML：

<img id="bg" src="whateves.jpg"/>

你可能想使用jquery中心在CSS

#bg { display:block; margin:auto; }

图像：

$(window).load(function(){ 
     var windowRezize = function() { 
      var windowHeight = $(window).height(), 
       bg = $('#bg'), 
       bgHeight = bg.height(); 

      console.log(windowHeight); 
      console.log (bgHeight); 
      bg.height($(window).height()); 
      bg.css('opacity', '1'); 
     }; 
     windowRezize(); 
     $(window).resize(function(){ 
      console.log('resized'); 
      windowRezize(); 
     }) 

    });

来源

2012-03-28 00:14:26

全屏幕背景图像（有点） - 没有裁剪？

回答

相关问题