CSS背景图像适合宽度，高度应该是自动的
我有
body {
background: url(images/background.svg);
}
预期的效果是这个背景图像的宽度等于页面宽度，高度变化以保持比例。 例如，如果原始图像碰巧是100 * 200（任何单位）并且身体宽度是600px，则背景图像最终应该是1200px高。 如果窗口调整大小，高度应该会自动改变。 这可能吗？
目前，Firefox看起来会让高度合适，然后调整宽度。 这可能是因为身高是最长的维度，它试图避免种植？ 我想垂直裁剪，然后滚动：无水平重复。
而且，即使在明确给出background-repeat:repeat的情况下，Chrome仍然会将图片放置在中心位置，而不会重复，这是默认情况。
这里有一个CSS3属性，即background-size （兼容性检查）。 虽然可以设置长度值，但通常使用特殊值contain和cover 。 在你的具体情况下，你应该使用cover ：
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
用于contain和cover Egplaces
对不起，这个坏的双关语，但我要用Biswarup Ganguly当天的照片来演示。 可以说这是你的屏幕，灰色区域在你的可见屏幕之外。 为了演示，我将假设一个16x9的比例。
我们想用上述的一天的图片作为背景。 但是，由于某种原因，我们将图像裁剪为4x3。 我们可以将background-size属性设置为某个固定长度，但我们将重点关注contain和cover 。 请注意，我还假设我们没有破坏body的宽度和/或高度。
contain
contain
在保持图像的固有高宽比（如果有）的同时，将图像缩放到最大尺寸，使其宽度和高度都可以放入背景定位区域内。
这样可以确保背景图像始终完全包含在背景定位区域中，但在这种情况下，可能会有一些空白区域填充background-color ：
cover
cover
在保持图像的固有高宽比（如果有的话）的同时，将图像缩放到最小尺寸，使其宽度和高度都能完全覆盖背景定位区域。
这确保了背景图像覆盖了一切。 将不会有可见的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>基于来自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;
}
我不确定你在找什么，但你真的应该看看由Chris Coyier从CSS-Tricks写的这些优秀的博客文章：
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
阅读每篇文章的描述，看看它们是不是你想要的。
第一个回答以下问题：
有没有办法让背景图片调整大小？ 如同，无论浏览器窗口的大小如何，都可以用图像边对边填充网页的背景。 另外，当浏览器窗口改变时，可以调整它的大小。 另外，确保它保持它的比例（不会拉伸怪异）。 此外，不会导致滚动条，如果需要垂直切断。 此外，作为内联标签进入页面。
第二篇文章的目标是获得以下内容：“在任何时候都覆盖整个浏览器窗口的网站上的背景图片。”
希望这可以帮助。
链接地址: http://www.djcxy.com/p/15765.html