我有
body {
background: url(images/background.svg);
}
理想的效果是，这个背景图像的宽度将与页面的宽度相等，高度改变以保持比例。例如，如果原始图像刚好是100*200(任何单位)，主体宽度为600px，背景图像最终应该是1200px高。如果窗口调整大小，高度应该自动改变。这可能吗?
目前，Firefox看起来像是先调整高度，然后再调整宽度。这可能是因为高度是最长的维度，它试图避免裁剪?我想垂直裁剪，然后滚动:没有水平重复。
此外，Chrome将图像放置在中心，没有重复，即使是明确给出background-repeat:repeat，这是默认的。
当前回答
背景图像没有设置完美，那么他的css是有问题的，所以他的css文件更改为下面的代码
html { 背景图片:url(“example.png”); 平铺方式:不再重演; 背景位置:0% 0%; Background-size: 100% 100%; ｝
%;Background-size: 100% 100%;"
其他回答
只要加上这一行:
.your-class {
height: 100vh;
}
Vh为视口高度。 这将自动缩放以适应设备的浏览器窗口。
查看更多在这里:使div 100%的高度浏览器窗口
这有一个CSS3属性，即background-size(兼容性检查)。虽然可以设置长度值，但通常与包含和覆盖的特殊值一起使用。在你的具体情况下，你应该使用掩护:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
鸡蛋平铺，用于包裹和覆盖
抱歉这个糟糕的双关语，但我将使用Biswarup Ganguly的当天照片来演示。假设这是你的屏幕，灰色区域在可见屏幕之外。为了演示，我将假设一个16x9的比率。
我们想用前面提到的当天的图片作为背景。然而，由于某些原因，我们将图像裁剪为4x3。我们可以将background-size属性设置为某个固定长度，但我们将重点关注包含和覆盖。注意，我还假设我们没有破坏身体的宽度和/或高度。
包含
包含 缩放图像，同时保留其固有长宽比(如果有的话)，以最大的尺寸，以便其宽度和高度都能适应背景定位区域。
这可以确保背景图像总是完全包含在背景定位区域中，然而，在这种情况下，可能会有一些空白空间被你的background-color填充:
封面
封面 缩放图像，同时保留其固有的纵横比(如果有的话)，以最小的尺寸，以便其宽度和高度都能完全覆盖背景定位区域。
这样可以确保背景图像覆盖所有内容。将没有可见的背景色，但是根据屏幕的比例，你的图像的很大一部分可能会被切断:
使用实际代码演示
div > div { background-image: url(http://i.stack.imgur.com/r5CAq.jpg); background-repeat: no-repeat; background-position: center center; background-color: #ccc; border: 1px solid; width: 20em; height: 10em; } div.contain { background-size: contain; } div.cover { background-size: cover; } /******************************************** Additional styles for the explanation boxes *********************************************/ div > div { margin: 0 1ex 1ex 0; float: left; } div + div { clear: both; border-top: 1px dashed silver; padding-top:1ex; } div > div::after { background-color: #000; color: #fefefe; margin: 1ex; padding: 1ex; opacity: 0.8; display: block; width: 10ex; font-size: 0.7em; content: attr(class); } <div> <div class="contain"></div> <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>. </p> </div> <div> <div class="cover"></div> <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p> </div>
以下是对我有效的方法:
background-size: auto 100%;
如果你设置min-height，例如:
min-height: 100vh;
您可以使用下面的代码来轻松地适应您的背景
body {
background: url(images/background.svg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
设置背景大小没有帮助，下面的解决方案对我有用:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
它基本上是裁剪图像并使其适合，背景-大小:包含/覆盖仍然没有使它适合。
