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

我正试图在一个分区内使用。我已经知道怎么做了，但是图像的宽度仍然在拉伸，以填满整个身体。有没有办法控制后拉伸图像，使其填充分割的高度和宽度，而不是整个身体？（划分是流动的，否则我会使用静态背景图像。）

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

这里有一个指向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");
    }

并将它们添加到

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

功能调整bg（fn）{
试一试{
bgCSS={左：0，上：0}
bgWidth=rootElement.width（）；
bgHeight=bgWidth/imgRatio；
如果（bgheath*编辑：自从我写了这篇文章后，我已经停止在正常设置下使用backstretch，因为它在Android智能手机上或者平板电脑的方向发生变化时似乎根本不起作用。然而，这里解释的这种修改仍然很有效，所以如果你想要一个固定高度的版本，请继续阅读-我在下面附上了JS，HTML是




这里有一个指向JS文件的链接->

我想用backstretch填充一个全宽的元素，但只占屏幕顶部560像素。如果图像的大小必须比原始图像大，它不会垂直居中，而是偏移，所以顶部消失了

是的，上面的链接是正确的，您将容器从主体更改为要填充的元素，在本例中是#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");
    }

并将它们添加到

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

功能调整bg（fn）{
试一试{
bgCSS={左：0，上：0}
bgWidth=rootElement.width（）；
bgHeight=bgWidth/imgRatio；
如果（bgHeight我做得简单多了。在backstretch.js中查找
比率。它表示如下内容：

"ratio",h/f

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

"ratio",0

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


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

但从本质上说，这是停止疯狂的全屏幕后退，但保留所有其他的好东西

：）
我做得更简单了。在backstretch.js中查找
比率。它显示如下内容：

"ratio",h/f

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

"ratio",0

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


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

但从本质上说，这是停止疯狂的全屏幕后退，但保留所有其他的好东西

：）