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

我有

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

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

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

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

有一个CSS3的属性,即background-size ( 兼容性检查 )。 虽然可以设置长度值,但通常使用特殊值containcover 。 在你的具体情况下,你应该使用cover

 body { background-image: url(images/background.svg); background-size: cover; /* <------ */ background-repeat: no-repeat; background-position: center center; /* optional, center the image */ } 

用于containcover Egplaces

对不起,这个坏的双关语,但我要用Biswarup Ganguly的一天的图片进行示范。 让我们说这是你的屏幕,灰色区域在你的可见屏幕之外。 为了演示,我将假设一个16×9的比例。

屏幕

我们想用上述的一天的图片作为背景。 但是,由于某种原因,我们将图像裁剪为4×3。 我们可以将background-size属性设置为固定长度,但我们将重点关注containcover 。 请注意,我也假定我们没有破坏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> 

基于来自https://developer.mozilla.org/en-US/docs/CSS/background-size的提示,我最终得到了适合我的以下配&#x65B9;

 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/

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

第一个回答以下问题:

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

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

希望这可以帮助。

尝试这个,

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

只需添加这一行:

  .your-class { height: 100vh; } 

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

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

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

错误代码:

 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是问题创build,所以他的CSS文件更改为下面的代码

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

以下是对我有用的东西:

 background-size: auto 100%;