有沒有辦法讓背景圖像自動寬度，全高，高度滾動，無寬度滾動

我想放置一張圖片到背景，因此它是全屏幕，圖像的寬度應改變爲身體寬度，沒有水平滾動。另一方面，我希望高度與寬度（不變形）和垂直滾動。我現在在做：有沒有辦法讓背景圖像自動寬度，全高，高度滾動，無寬度滾動

html, body { 
    margin: 0px; 
    padding: 0px; 
} 
body 
{ 
    background-color: #767676; 

} 
#wrapper { 
    position: absolute; 
    min-height: 100%; 
    width: 100%; 
    background: url('back.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    border: 0; 
    background-size:100% auto; 
}

但它收縮高度，沒有滾動。

來源

2013-10-17 Tigran

爲什麼不設置圖像background在body？

body { 
    background: url(back.jpg) no-repeat fixed center center; 
    background-size: 100%; 
}

這裏有一個小提琴ilustrating效果：http://jsfiddle.net/Kqkyb/2/

編輯：
我不知道如果我沒有接到你的問題滾動的想法，但現在我把它改成fixed所以無論頁面滾動到何處，圖像將始終保持在視口的頂部。
EDIT2：
另一個更新。我更精確地檢查了您的CSS，並注意到您希望將圖像放置在中心位置 - 無論是在垂直軸還是在水平軸上。我在代碼中以及在小提琴中糾正了它。

來源

2013-10-17 13:14:49 matewka

這不是我想要的。我的整個頁面就是這個圖像，我想垂直滾動它。 – Tigran

你能準備一個你想要實現的例子嗎？類似的網站或圖像說明效果？ – matewka

我不復制它，所以我不知道在哪裏可以找到示例。抱歉。它可以是任何圖像。 – Tigran

$("#wrapper").css({'height':($("body").width() * 462/694 +'px')});

462/694 - 是我的形象的比例。所以現在當brouser調整圖像大小（即寬度）時，我得到了新的寬度，計算高度並使其工作。

但我想必須有一些CSS解決方案。

來源

2013-10-17 13:57:30 Tigran

不安分的夜晚，終於，我解決了完全相同的麻煩。我結合了兩種思路：

Scale a div to fit in window but preserve aspect ratio
和公知的技術，我的意思是從這裏 http://css-tricks.com/perfect-full-page-background-image/

HTML

<div class='image'> 
    <div class="content"></div> 
<div>

和CSS

.image{ 
    position: relative; 
    display: inline-block; 
    width: 100%; 
} 
.image::after { 
    padding-top: 66.66%; 
    display: block; 
    content: ''; 
} 
.content { 
    position: absolute; 
    background-image: url('../img/image.png'); 
    background-size: cover; 
    top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */

第一個

重要！

padding-top: 66.66%;

包含塊寬度（！）的百分比。它取決於您的圖像的寬高比。我用的是1920x1280的影像地圖，所以1280/1920 = 0.6666666。結果是絕對響應和擴展到任何分辨率。主要的東西 - 垂直滾動出現！

來源

2014-01-09 04:07:50 Kees

有沒有辦法讓背景圖像自動寬度，全高，高度滾動，無寬度滾動

回答

相關問題