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

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解决方案。