直道，減少寬度師

的寬度，我嘗試使用backstretch一個部門裏面。我已經想通了如何做到這一點here但圖像的寬度仍然拉伸填滿整個身體。有沒有辦法控制背景圖像，使其填滿分割的高度和寬度，而不是整個身體？（該部門是流體，否則我會使用一個靜態背景圖片。）直道，減少寬度師

來源

2011-08-19 Josh

*編輯：自從我寫這個，我用正常的設置直道停止，因爲它似乎並沒有在工作很好Android智能手機或平板電腦的方向發生了變化。但是，這裏解釋的這個修改仍然很好，所以如果你想要一個固定高度的版本閱讀 - 我已經附加了下面的JS，HTML是;

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

這裏的JS文件的鏈接 - >http://www.mcnab.co/backstretch.js

我想用直道，以填補這是全寬度的元素，但佔去了只有前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"); 
    }

爲了達到這個目的，_adjustBG方法必須要稍微改變一下。首先，您需要將imgWidth和imgHeight變量放在全局範圍內。從

var self = $(this);

刪除它們，並將它們添加到

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

我終於改寫了_adjustBG方法使用imgWidth和imgHeight，而不是擁有一切支持算法FMP的檢測瀏覽器的寬度和高度的一大塊。

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

};

這對我的工作非常好，我希望這可以幫助別人。如果有人來這裏，並且對我如何能夠做得更好有任何評論，那麼我很樂意聽到他們的聲音。

乾杯，

Robbie。

來源

2012-04-18 12:06:14 McNab

我做了這麼多simplier。在backstretch.js中查找ratio。它說類似於：

"ratio",h/f

我嘗試了一百萬個不同的公式後將其更改爲h/h-1。然後我意識到這其實是一個零的比例。因此將其更改爲：

"ratio",0

現在無論身高如何，圖像都以100％的寬度粘住。然後，我用@media標記在css中設置了一些最大寬度和最小寬度，並確保頁面的內容部分始終跳起來，以確保圖像下方沒有空白，因爲它變得更小。你可以在這裏看到的例子：

http://katjaglieson.com

這花了我一整天笑。

但本質上，這是停止直道的瘋狂全屏岬但保留所有其他的東西。

來源

2015-02-13 21:52:35

直道，減少寬度師

回答

相關問題