底部固定圖像，如附件屏幕截圖所示

如下面的屏幕截圖所示，我想放置底部固定圖像，該圖像應該出現在某些內容（標誌和中心描述文本）之後（不會超過）。該圖像應該適合屏幕的寬度。底部固定圖像，如附件屏幕截圖所示

我想出了這兩個錯誤的解決方案。首先，使用CSS背景大小屬性：

// CSS 
.bg { 
    width: 600px; 
    height: 300px; 
    position: fixed; 
    bottom: 0; 
    left: 0%; 
    background: url('image.jpg') no-repeat center fixed; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
} 

// HTML part 
<div class="bg"></div>

其次，使用JavaScript代碼和識別窗口的大小調整和圖像標籤設置一些CSS屬性：

// JS 
     // some magick here... 
     if ((win_w/win_h) < ($bg.width()/$bg.height())) { 
      $bg.css({height: '100%', width: 'auto'}); 
     } else { 
      $bg.css({width: '100%', height: 'auto'}); 
     } 

// HTML Part (I'm using a shim) 
<img class="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: relative; left: 0; bottom: 0" />

這些解決方案的工作，但我不希望圖片覆蓋（或作爲背景）徽標和描述。你可以幫我嗎？

example to achieve

來源

2013-07-10 Mich Dart

爲什麼這麼複雜？只需將圖片放在文字說明和菜單下面 –

該圖像應該適合窗戶的高度。我不想向下滾動。如果我調整視口的大小，它應該始終鎖定在頁腳的頂部並動態調整它的高度。 –

您可以使用'max-width：100％;'將圖像保持爲與其容器（在本例中爲視口）一樣大，當寬度發生變化時，它可以正確縮放並保持寬高比。對於IE，你需要一個特定的樣式表，其中'width：100％;'或'max-width' css聲明的填充。讓我知道這是否有效。 –

像這樣的東西可能：http://jsfiddle.net/

我做了什麼：

我第一次應用了粘頁腳：http://ryanfait.com/sticky-footer/
我再添加了一個額外的div爲背景（裏面的內容包裝，但這不應該是必要的）
我po將背景div絕對化，頂部與頂部內容的高度相等（徽標和其他內容不需要背景），底部等於頁腳高度。左和右我設置爲0，使其佔據全寬。
我申請background-size: contain你已經想通了（仍需要在我的例子前綴）

爲背景的CSS是這樣的：

#background { 
    background: url(...) no-repeat center; 
    background-size: contain; 
    position: absolute; 
    top: 30px; /* height of content above */ 
    bottom: 50px; /* height of content beneath */ 
    left: 0; 
    right: 0; 
    z-index: -1; /* to position it under the content, but as no content is covering it, you could leave it out as well */ 
}

通常情況下，我不加入一個大風扇空div只用於造型，但我不會在這裏看到其他解決方案。我更不喜歡使用JavaScript的東西，可能會弄亂你的網站，如果它沒有得到應用（優雅降級和所有），所以這可能是我會走的方式......

來源

2013-07-10 22:37:47 Pevara

哇！這正是我所期待的。非常感謝。我現在正試圖將它與Stellar.js整合爲一個視差垂直滑動網站。但那是另一回事;）再次感謝你 –

底部固定圖像，如附件屏幕截圖所示

回答

相關問題