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

Is there a way to make background image auto width, full height, height scroll, no width scroll

本文关键字：滚动 高度 全高 背景 图像 有没有      更新时间：2023-09-26

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

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

但它缩小了高度，没有滚动。

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

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

这里有一个小提琴来说明效果：http://jsfiddle.net/Kqkyb/2/

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

不安的夜晚，最后，我解决了完全相同的麻烦。我结合了两个想法：

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

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

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

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

相关文章：