固定拉伸背景圖片

我已經草擬了一個我到目前爲止所做的簡單示例，以及我正在努力實現的目標。固定拉伸背景圖片

見我的演示here

在我的jsfiddle你會看到一個名爲「內容包」的包裝股利。在這個div內，我想要一個可以擴展到窗口大小和內容的圖像。

我已經做了背景圖片拉伸前：見例如here

但是，這是一個比較複雜一點，因爲它是網站內的特定區域。

我已經嘗試過使用上述鏈接中的現有代碼進行遊戲，我想我可能需要採取不同的方法。當您向下滾動時，圖像不能保持在原位，它會隨滾動條一起移動（因爲它應該）。

任何想法？

來源

2012-08-15 Filth

你的意思是，作爲背景圖像。有這個http://jsfiddle.net/kztGj/22/？ – Jeemusu 2012-08-15 04:06:58

@Jeemusu是作爲背景圖片 - 您的示例非常接近，因爲圖片無法具有固定高度，因爲內容會填充頁面，因此會增加頁面高度。 – Filth 2012-08-15 04:09:22

如果刪除高度，如第22次迭代jsfiddle.net/kztGj/22？等等，你是指固定高度？容器上的固定高度爲300px？ – Jeemusu 2012-08-15 04:09:56

如果您不介意使用CSS3的background-size屬性，那麼以下將添加到您的#content-wrap { CSS語句中將獲得響應的背景圖像，該圖像將擴展以適應容器的大小。

#content-wrap { 
    height: 1000px; 
    background: #ccc; 
    color: #fff; 

    /* Added CSS */ 

    display: block; 
    max-width: 100%; 
    clear: both; 
    background: transparent url("http://placekitten.com/900/900") top right no-repeat; 
    background-size: cover; 
}

這是你的jsfiddle的更新版本，我添加的CSS和一些可愛的placekittens： http://jsfiddle.net/kztGj/22/

的缺點這個是當然的，它不會在Internet Explorer < 9，Firefox 3.6的工作，或任何不支持CSS3的瀏覽器。但是，接下來你需要一個響應式圖像，因此你會很難找到一個支持舊版瀏覽器的優雅解決方案。

有關background-size財產及其用途的更多信息，我建議您查看this article，其相當豐富。

來源

2012-08-15 04:18:26 Jeemusu

這是一個很棒的JS，它可以爲你帶來這個IE - https://github.com/louisremi/jquery.backgroundSize.js – Brian 2012-09-05 01:30:38

在你的圖像，添加CSS這樣

.custom-image { 
    width:100%; 
}

和你HTML

<div> 
    <img src="" class="custom-image" /> 
</div>

來源

2012-08-31 09:55:59

固定拉伸背景圖片

回答

相關問題