个人中心
gpt4 book ai didi

jquery - 在分区内使用后拉伸(stretch)并将宽度减小到分区的宽度

转载 作者：行者123 更新时间：2023-12-01 06:57:48 25 4
gpt4 key购买 nike

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

最佳答案

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

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

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

};

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

干杯，

罗比。

关于jquery - 在分区内使用后拉伸(stretch)并将宽度减小到分区的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7125499/

25 4 0
文章推荐： jquery - 如何为这个 jQuery 动画添加加速？
文章推荐： javascript - ReverseParentheses - Codefights
文章推荐： Java 最多读取一次 map
文章推荐： java - 重命名 openconnection() 还是剪掉它？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com