有没有办法使背景图像自动宽度，全高，高度滚动，无宽度滚动答案

【问题标题】：Is there a way to make background image auto width, full height, height scroll, no width scroll有没有办法使背景图像自动宽度，全高，高度滚动，无宽度滚动
【发布时间】：2014-01-09 12:07:50
【问题描述】：

我想将图片放置到背景，因此它是全屏的，图像的宽度应该更改为正文宽度并且没有水平滚动。另一方面，我希望高度与宽度成比例（无失真）并且有垂直滚动。我现在在做：

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

但是它缩小了高度并且没有滚动。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

为什么不在body 中设置图像background？

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

这是一个说明效果的小提琴：http://jsfiddle.net/Kqkyb/2/

编辑：
我不确定我是否正确地从您的问题中得到了 scroll 的想法，但现在我将其更改为 fixed，因此无论页面在哪里，图像都将始终保持在视口的顶部滚动到。
EDIT2：
另一个更新。我更精确地检查了您的 CSS，并注意到您希望图像位于中心 - 垂直轴和水平轴。我在代码和小提琴中更正了它。

【讨论】：

这不是我真正想要的。我的整个页面就是这张图片，我想垂直滚动它。
你能准备一个例子来说明你想要达到的目标吗？类似的网站或说明效果的图片？
我没有复制它，所以我不知道在哪里可以找到示例。对不起。它可以是任何图像。
但我有一些想法：我将添加一个宽度和高度为 1px 的额外 div，每次调整 brouser 大小时都会计算。
现在我完全糊涂了。

【解决方案2】：

不安的夜晚，终于，我解决了完全相同的问题。我结合了两个想法：

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。结果是绝对响应的，并且可以扩展到任何分辨率。最重要的是 - 垂直滚动出现了！

【讨论】：

【解决方案3】：

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

462 / 694 - 是我图像的比例。所以现在当 brouser 调整图像大小（即宽度）时，我得到了新的宽度，计算高度并使其工作。

但我想肯定有一些 css 解决方案。

【讨论】：