Question

我试图在分区内使用backstretch。我已经想出了如何做到这一点here但是图像的宽度仍在伸展以填满整个身体。有没有办法控制后伸图像，使其填充分区的高度和宽度，而不是整个身体？（除法是流动的，否则我会使用静态背景图像。）

Answer 1

*编辑：自从我写这篇文章以来，我已经停止在正常设置上使用backstretch，因为它似乎在Android智能手机上运行得不好或者平板电脑的方向发生了变化。但是，这里解释的这个修改仍然很有效，所以如果你想要一个固定高度的版本阅读 - 我已经附上了JS，HTML就是;

<body> <div id="backimage"></div> </body>

这是JS文件的链接 - ＆gt; http://www.mcnab.co/backstretch.js

我想使用backstretch来填充一个全宽的元素，但只占据了屏幕的前560px。如果图像必须调整大小比原始图像大，它没有垂直重新定位但是偏移，所以顶部消失了。

是的，上面的链接是正确的，您将容器从正文更改为要填充的元素，在这种情况下，它是#backimage

 // Append the container to the #backimage, if it's not already there
  if($("#backimage #backstretch").length == 0) {
     $("#backimage").append(container);
  }

然后我更改了代码，为加载的图像分配固定高度css而不是100％;

// If this is the first time that backstretch is being called
   if(container.length == 0) {
       container = $("<div />").attr("id", "backstretch")
                   .css({left: 0, top: 0, position: "fixed", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "560", width: "100%"});
    } else {
       // Prepare to delete any old images
        container.find("img").addClass("deleteable");
    }

要实现这一点，必须更改_adjustBG方法。首先，您需要为imgWidth和imgHeight变量提供全局范围。从

中删除它们

var self = $(this);

并将它们添加到

rootElement = ("onorientationchange" in window) ? $(document) : $(window), 
imgRatio, bgImg, imgWidth, imgHeight, bgWidth, bgHeight, bgOffset, bgCSS;

最后，我重新编写了一个_adjustBG方法的大块来使用imgWidth和imgHeight，而不是根据检测到的浏览器宽度和高度来完成它。

function _adjustBG(fn) {
    try {
        bgCSS = {left: 0, top: 0}
        bgWidth = rootElement.width();
        bgHeight = bgWidth / imgRatio;  

            if( bgHeight <= 560 ) {

                bgHeight = 560;
                bgWidth = 560 * imgRatio;

                bgOffset = ( bgWidth - rootElement.width() ) / 2;
            if(settings.centeredY) $.extend(bgCSS, {left: "-" + bgOffset + "px"});                      

            } else {

                bgHeight = (rootElement.width() / imgRatio);
                bgWidth = rootElement.width()

                bgOffset = ( bgHeight - 560 );
            if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});   

            }

        $("#backstretch, #backstretch img:last").width( bgWidth ).height( bgHeight )
                                                .filter("img").css(bgCSS);
    } catch(err) {
        // IE7 seems to trigger _adjustBG before the image is loaded.
        // This try/catch block is a hack to let it fail gracefully.
    }

    // Executed the passed in function, if necessary
    if (typeof fn == "function") fn();
}

};

它对我很有用，我希望这对其他人有帮助。如果有人来到这里并对我如何做得更好有任何评论，那么我会很高兴听到他们。

干杯，

罗比。

Answer 2

我做得更简单了。在backstretch.js中查找ratio。它说的是：

"ratio",h/f

我在尝试了一百万种不同的公式之后将其改为h / h-1。然后我意识到这实际上是零比率。所以改成它：

"ratio",0

现在无论高度如何，图像都以100％的宽度粘贴。然后我用@media标签在css中设置了一些最大宽度和最小宽度，并确保页面的内容部分始终向上跳，以确保图像下方没有空白，因为它变小了。你可以在这里看到这个例子：

http://katjaglieson.com

这花了我一整天。

但实际上，这可以阻止疯狂的全屏幕背景，但保留所有其他好东西。

：）

在分区内使用backstret并将宽度减小到除法宽度

2 个答案: