在后台拉伸和缩放CSS图像 – 仅限CSS
我希望我的背景图像可以根据浏览器的视口大小进行拉伸和缩放。
我已经看到Stack Overflow的一些问题，例如拉伸和缩放CSS背景 。 它运作良好，但我想放置图像使用background ，而不是一个img标签。
在那一个img标签被放置，然后用CSS我们致敬img标签。
width:100%; height:100%;
它的工作原理，但这个问题有点老，并指出在CSS 3调整背景图像将工作得很好。 我已经尝试了这个例子 ，但它并没有为我工作。
有没有一个好的方法来做到这一点与background-image声明？
CSS3有一个很好的小属性叫做background-size:cover 。
这会缩放图像，使背景区域完全被背景图像覆盖，同时保持宽高比。 整个区域将被覆盖，但如果resize的图像的宽度/高度太大，则图像的一部分可能不可见
你可以使用CSS3属性做得很好。 它调整比例，所以没有图像失真（虽然它高档小图像）。 请注意，它尚未在所有浏览器中实现。
background-size: 100%;
使用我提到的代码 …
HTML
<div id="background"> <img src="img.jpg" class="stretch" alt="" /> </div>
CSS
#background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */ } .stretch { width:100%; height:100%; }
这产生了预期的效果：只有内容会滚动，而不是背景。
背景图像调整到浏览器视口的任何屏幕大小。 当内容不适合浏览器视口，并且用户需要滚动页面时，背景图像在内容滚动时保持固定在视口中。
用CSS 3看起来这会容易得多。
CSS：
html,body { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; /* For WebKit*/ -moz-background-size: cover; /* Mozilla*/ -o-background-size: cover; /* Opera*/ background-size: cover; /* Generic*/ }
下面的CSS部分应该用所有浏览器拉伸图像。
我为每个页面dynamic地执行此操作。 因此我使用PHP为每个页面生成自己的HTML标签。 所有的图片都在“图片”文件夹中，并以“Bg.jpg”结尾。
<html style=" background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\'); -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\ ";>
如果所有页面只有一个背景图片，那么您可以删除$picvariables，删除转义反斜线，调整path并将此代码放入CSS文件中。
html{ background: url(images/homeBg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale'); -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale'); }
这已经过Internet Explorer 9，Chrome 21和Firefox 14的testing。
background-size: 100% 100%;
拉伸bg以填充两个轴上的整个元素
使用这个CSS：
background: url('img.png') no-repeat; background-size: 100%;
用img标签实际上可以达到与背景图像相同的效果。 您只需要将z-index设置为低于其他值，设置position：absolute，并为前景中的每个方框使用透明背景。
您可以将此类添加到您的CSS文件中。
.stretch { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
它适用于：
- Safari 3或更高版本
- Chrome随时随地
- Internet Explorer 9或更高版本
- Opera 10或更高版本（Opera 9.5支持
background-size，但不支持关键字） - Firefox 3.6或更高版本（Firefox 4支持非供应商前缀版本）
我使用这个，它适用于所有浏览器：
<html> <head> <title>Stretched Background Image</title> <style type="text/css"> /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */ html, body {height:100%; margin:0; padding:0;} /* Set the position and dimensions of the background image. */ #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */ #content {position:relative; z-index:1; padding:10px;} </style> <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. --> <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> </head> <body> <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div> <div id="content"> <h2>Stretch that Background Image!</h2> <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p> <p>Go on, try it - resize your browser!</p> </div> </body> </html>
为了根据容器大小适当地缩放图像，请执行以下操作：
{ background-size:contain; background-repeat: no-repeat; }
我同意100％宽度和高度绝对div中的图像。 确保在CSS中为body设置了100％的宽度和高度，并将margin和padding设置为零。 使用这种方法的另一个问题是，select文本时，select区域有时会包含背景图像，这会使整个页面处于选中状态，具有不幸的效果。 你可以通过使用user-select:none CSS规则来得到这个结果，如下所示：
<html> <head> <style type="text/css"> html,body { height: 100%; width: 100% margin: none; padding: none; } #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -99999; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } #background img { width: 100%; height: 100%; } #main{ z-index:10;} </style> </head> <body> <div id="main"> content here </div> <div id="background"><img src="bg.jpg"></div> </body> </html>
再一次，Internet Explorer在这里是坏人，因为它不能识别用户select选项 – 即使Internet Explorer 10预览也不支持它，所以您可以select使用JavaScript来防止背景图像select（例如， http ：//www.felgall.com/jstip35.htm ）或使用CSS 3背景拉伸方法。
此外，对于search引擎优化，我会把背景图片放在页面的底部，但是如果背景图片加载时间太长（也就是说，最初有一个白色背景），您可以移动到页面的顶部。
谢谢！
但之后Google Chrome浏览器和Safari浏览器无法正常工作（拉伸工作，但照片的高度只有2毫米！） ，直到有人告诉我缺乏：
尝试设置
height:auto;min-height:100%;
所以改变你的height:100%; 线，给出：
#### #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { width:100%; height:auto; min-height:100%; }
就在这个新添加的代码之前，我在Drupal的 Tendu主题style.css有这个代码：
html，body {height：100％;}
#page {背景：#FFFFFF; 身高：自动！重要;身高：100％;最小身高：100％;身高：相对;}
然后，我必须在Drupal中创build一个新的块，并添加class=stretch ：
<img alt =“”class =“stretch”src =“pic.url”/>
只要在该Drupal块中使用编辑器复制图片不起作用; 必须将编辑器更改为非格式文本。
我想居中和缩放一个背景图像，而不是将其拉伸到整个页面，我想要保持宽高比。 这对我工作，感谢其他答案中提出的变化：
在线图像：————————
<div id="background"> <img src="img.jpg" class="stretch" alt="" /> </div>
CSS ———————————-
html { height:100%; } #background { text-align: center; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { margin: auto; height:100%; }
使用Backstretch插件。 甚至可以有几个图像幻灯片。 它也在容器中工作。 例如，这种方式可能只有一部分背景被背景图像覆盖。
因为即使我能得到它的工作certificate它是一个易于使用的插件:)。
由css-tricks解释https://css-tricks.com/perfect-full-page-background-image/
演示： https ： //css-tricks.com/examples/FullPageBackgroundImage/progressive.php
代码：
body { background: url(images/myBackground.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
您可以使用border-image : yourimage属性将图像缩放到边界，即使您提供了背景图像，也会将边框图像绘制到边框图像上。
如果你的样式表被实现在不支持CSS3的地方，border-image属性是非常有用的。 如果你使用Firefox的Chrome，那么我build议使用background-size:cover属性。
你想用一个图像来实现这个吗？ 因为你实际上可以使用两张图像来使它有点类似于伸展的背景。 例如PNG图像。
我之前做过这个，并不难。 此外，我认为拉伸只会损害背景的质量。 如果你添加一个巨大的图像，它会减慢计算机和浏览器的速度。
