我有
body {
background: url(images/background.svg);
}
理想的效果是，这个背景图像的宽度将与页面的宽度相等，高度改变以保持比例。例如，如果原始图像刚好是100*200(任何单位)，主体宽度为600px，背景图像最终应该是1200px高。如果窗口调整大小，高度应该自动改变。这可能吗?
目前，Firefox看起来像是先调整高度，然后再调整宽度。这可能是因为高度是最长的维度，它试图避免裁剪?我想垂直裁剪，然后滚动:没有水平重复。
此外，Chrome将图像放置在中心，没有重复，即使是明确给出background-repeat:repeat，这是默认的。
当前回答
这有一个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>
其他回答
我也遇到了同样的问题，在调整浏览器尺寸时无法调整图像大小。
糟糕的代码:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
好的代码:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
这里的关键是添加这个元素-> background-size: contains;
背景图像没有设置完美，那么他的css是有问题的，所以他的css文件更改为下面的代码
html { 背景图片:url(“example.png”); 平铺方式:不再重演; 背景位置:0% 0%; Background-size: 100% 100%; ｝
%;Background-size: 100% 100%;"
根据https://developer.mozilla.org/en-US/docs/CSS/background-size上的建议，我总结出了以下对我有用的食谱
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
只要加上这一行:
.your-class {
height: 100vh;
}
Vh为视口高度。 这将自动缩放以适应设备的浏览器窗口。
查看更多在这里:使div 100%的高度浏览器窗口
试试这个,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
