有没有一种方法可以使背景图像自动变宽，全高，高度滚动，无宽度滚动

Question

I want to place a picture to background thus it was full screen, the width of image should change to body width and no horizontal scroll. On the other hand, I want height be with ratio to width (no distortion) and had vertical scroll. I am now doing:

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

But it shrink height and no scroll.

Answer 1

Why not setting image background in body ?

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

Here's a fiddle ilustrating the effect: http://jsfiddle.net/Kqkyb/2/

EDIT :
I'm not sure if I got the scroll idea from your question correctly but for now I changed it to fixed so the image will always stay at the top of the viewport no matter where the page is scrolled to.
EDIT2 :
Another update. I examined your CSS more precisely and noticed that you wanted the image to be positioned in center - both in vertical and horizontal axis. I corrected it in the code as well as in the fiddle.

Answer 2

Restless night and, finally, i've solved exactly the same trouble. I combined two ideas:

1. Scale a div to fit in window but preserve aspect ratio
2. and well-known techniques, i mean first one from here http://css-tricks.com/perfect-full-page-background-image/

HTML

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

and 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 */

Important!

padding-top: 66.66%;

Percentage of containing block width(!). It depends of aspect ratio of your image. I used imagemap 1920x1280, so 1280 / 1920 = 0.6666666. The result is absolutely responsive and scales to any resolution. And the main thing - vertical scroll appears!

Answer 3

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

462 / 694 - is ratio of my image. So now when brouser resize image (ie width), I got new width, calculate height and make it work.

But I suppose there must be some css solution.