0

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

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

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

4

3 回答 3

3

为什么不设置background图像body？

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

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

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

于 2013-10-17T13:14:49.370 回答
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%;

包含块宽度的百分比（！）。这取决于图像的纵横比。我使用了 1920x1280 的图像映射，所以 1280 / 1920 = 0.6666666。结果是绝对响应的，并且可以扩展到任何分辨率。最主要的 - 垂直滚动出现了！

于 2014-01-09T04:07:50.687 回答
0 
 $("#wrapper").css({'height':($("body").width() * 462 / 694 +'px')});

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

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

于 2013-10-17T13:57:30.057 回答