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

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

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

这是影响效果的小提琴：http://jsfiddle.net/Kqkyb/2/

修改：
我不确定我是否正确地从你的问题中得到了滚动的想法，但是现在我把它改为fixed所以无论在哪里，图像都将始终保持在视口的顶部页面滚动到。
的 EDIT2 ：
另一个更新。我更精确地检查了你的CSS并注意到你想要将图像定位在中心 - 包括垂直和水平轴。我在代码和小提琴中纠正了它。

Answer 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%;

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

Answer 3

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

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

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

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

3 个答案: