当前位置：文江博客话题详情

在分区内使用后拉伸并将宽度减小到分区的宽度

发布于 2024-11-30 14:38:22 字数 297 浏览 0 评论 0原文

我正在尝试在部门内使用 backstretch 。我已经弄清楚如何做到这一点此处，但图像的宽度仍然拉伸到充满整个身体。有没有办法控制后拉伸图像，使其填充分区的高度和宽度，而不是整个身体？（划分是流动的，否则我会使用静态背景图像。）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

格子衫的從容 2024-12-07 14:38:22

*编辑：自从我写这篇文章以来，我已经停止在正常设置下使用后拉伸，因为它似乎在 Android 智能手机上或平板电脑方向改变时根本无法正常工作。然而，这里解释的这种修改仍然有效，所以如果你想要一个固定高度的版本，请继续阅读 - 我已附上下面的 JS，HTML 是；

<正文>

这是 JS 文件的链接 -> 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();
}

};

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

干杯，

罗比。

*Edit: Since I wrote this I've stopped using backstretch on normal settings because it doesn't seem to work at all well on Android smartphones or when tablets have their orientation changed. However, this modification explained here still works great, so if you want a fixed height version read on- I've attached the JS below, the HTML is;

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

Here's a link to the JS file -> http://www.mcnab.co/backstretch.js

I wanted to use backstretch to fill an element which was full width but took up only the top 560px of the screen. And if the image had to be resized larger than the original it didn't recenter vertically but was offset so the top disappeared.

Yes, the link above is correct, you change the container from the body to the element you want to fill, in this case it was #backimage

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

Then I changed the code to assign a fixed height css to the image loaded rather than 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");
    }

To achieve this the _adjustBG method has to be changed quite a bit. First of all you need to give the imgWidth and imgHeight variables a global scope. Remove them from

var self = $(this);

and add them to

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

Finally I rewrote a chunk of the _adjustBG method to use the imgWidth and imgHeight rather than have it all basedon the detected browser width and height.

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

};

It's working great for me, and I hope this helps somebody else. If anyone comes by here and has any comments on how I could have done it better then I'd be happy to hear them.

Cheers,

Robbie.

回复收藏 0 原文

〗斷ホ乔殘χμё〖 2024-12-07 14:38:22

我这样做就简单多了。在 backstretch.js 中查找 ratio。它说的是这样的：

"ratio",h/f

在尝试了一百万个不同的公式之后，我将其更改为 h/h-1。然后我意识到这实际上是一个零比率。因此将其更改为：

"ratio",0

现在，无论高度如何，图像都保持 100% 宽度。然后，我使用 @media 标签在 css 中设置一些最大宽度和最小宽度，并确保页面的内容部分始终向上跳跃，以确保图像变小时图像下方没有空白。您可以在此处查看示例：

http://katjaglieson.com

这花了我一整天的时间，哈哈。

但本质上，这阻止了向后伸展的疯狂全屏，但保留了所有其他好处。

I did this much simplier. Look for the ratio in the backstretch.js. It says something like:

"ratio",h/f

I changed it to h/h-1 - after trying a million different formulas. Then I realized this is actually a ratio of zero. So change it to:

"ratio",0

Now the images are sticking at 100% width regardless of the height. I then set some max-width and min-width in css with the @media tag and made sure the content section of the page was always jumping up to ensure no whitespace below the image as it gets smaller. You can see the example here:

http://katjaglieson.com

This took me a whole day lol.

But essentially this is stopping the crazy full screen-ness of backstretch but keeping all the other goodies.

回复收藏 0 原文

~没有更多了~