Question

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

Answer 1

HTML：

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

您可能希望将图像置于css中心

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

使用jquery：

$(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();
      })

  });

Answer 2

这不是不可能的！你完全可以做到这一点。使用JQuery查找浏览器视口的高度和宽度，瞧！将背景图像设置为该大小。如果你需要维护方面，使用JQuery算法的宽度/高度，使用该比率来衡量实际尺寸的比例，如果它更高/更低，设置背景图像的高度/宽度为100％和另一个维度无论实际比率如何计算它。

如果您的客户不关心滚动条，您可以在第三次尝试时遵循本指南： http://css-tricks.com/766-how-to-resizeable-background-image/并根据背景图像的宽度将html / body元素的最小高度设置为所需的最小高度。我希望这一切都可以帮助你了解该怎么做。

全屏背景图像（排序） - 没有裁剪？

2 个答案: