CSS的背景图像适合宽度，高度应该按比例自动缩放

我有

body { background: url(images/background.svg); } 

预期的效果是这个背景图像的宽度等于页面宽度，高度变化以保持比例。 例如，如果原始图像碰巧是100 * 200（任何单位），身体宽度是600px，则背景图像最终应该是1200px高。 如果窗口被resize，高度应该自动改变。 这可能吗？

目前，Firefox看起来正在调整高度，然后调整宽度。 这可能是因为高度是最长的一个维度，它试图避免种植？ 我想垂直裁剪，然后滚动：没有水平重复。

此外，Chrome将图片置于中间位置，即使在明确给出background-repeat:repeat的情况下也不会重复，这是默认设置。

Answer 1

有一个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的一天的图片进行示范。 让我们说这是你的屏幕，灰色区域在你的可见屏幕之外。 为了演示，我将假设一个16×9的比例。

我们想用上述的一天的图片作为背景。 但是，由于某种原因，我们将图像裁剪为4×3。 我们可以将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>&lt;div&gt;</code>.</p> </div> 

Answer 2

基于来自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; } 

Answer 3

我不确定你在找什么，但你真的应该看看Chris Coyier从CSS-Tricks所写的这些优秀的博客文章：

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

阅读每篇文章的描述，看看他们是你在找什么。

第一个回答以下问题：

有没有办法让一个背景图像resize？ 就像在网页中，无论浏览器窗口的大小如何，都可以用图像填充网页的背景。 另外，当浏览器窗口改变时，调整它的大小。 另外，确保它保持它的比例（不拉伸怪异）。 此外，不会导致滚动条，只是如果需要垂直切断。 此外，作为内联标签进入页面。

第二篇文章的目标是获得以下内容：“在任何时候都覆盖整个浏览器窗口的网站上的背景图片”。

希望这可以帮助。

Answer 4

尝试这个，

 element.style { background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover; } 

Answer 5

只需添加这一行：

  .your-class { height: 100vh; } 

vh是视口高度。 这将自动缩放以适应设备的浏览器窗口。

查看更多这里： 使div 100％的浏览器窗口的高度

Answer 6

我有同样的问题，调整浏览器尺寸时无法调整图像大小。

错误代码：

 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;

Answer 7

背景图像不是完美的然后他的CSS是问题创build，所以他的CSS文件更改为下面的代码

 html { background-image: url("example.png"); background-repeat: no-repeat; background-position: 0% 0%; background-size: 100% 100%; } 

Answer 8

以下是对我有用的东西：

 background-size: auto 100%;