有沒有一種方法可以使背景圖像自動變寬，全高，高度滾動，無寬度滾動

Question

我想將圖片放置在背景上，因此它是全屏的，圖像的寬度應更改為主體寬度，並且沒有水平滾動。 另一方面，我希望高度與寬度成比例（不失真）並具有垂直滾動。 我現在在做：

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

但是它縮小了高度並且沒有滾動。

Answer 1

為什么不在body設置圖像background ？

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

這是一個擺弄效果的小提琴： http : //jsfiddle.net/Kqkyb/2/

編輯 ：
我不確定我是否從您的問題中正確地獲得了滾動提示，但現在我將其更改為“ fixed因此無論頁面滾動到何處，圖像始終位於視口頂部。
編輯2 ：
另一個更新。 我更精確地檢查了CSS，發現您希望將圖像放置在中心（垂直軸和水平軸）。 我在代碼以及小提琴中都對其進行了糾正。

Answer 2

不安的夜晚，最后，我解決了同樣的麻煩。 我結合了兩個想法：

1. 縮放div以適合窗口但保留寬高比
2. 和眾所周知的技術，我的意思是這里的第一個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%;

包含塊寬度（！）的百分比。 這取決於圖像的縱橫比。 我使用imagemap 1920x1280，所以1280/1920 = 0.6666666。 結果是絕對響應的，並且可以縮放到任何分辨率。 最主要的是-出現了垂直滾動！

Answer 3

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

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

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