在背景中拉伸和缩放 CSS 图像 - 仅使用 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1150163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stretch and scale a CSS image in the background - with CSS only
提问by Fábio Antunes
I want that my background image stretch and scale depending on the browser viewport size.
我希望我的背景图像根据浏览器视口大小进行拉伸和缩放。
I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS backgroundfor example. It works well, but I want to place the image using background, not with an imgtag.
我在 Stack Overflow 上看到了一些可以完成这项工作的问题，例如拉伸和缩放 CSS 背景。它运行良好，但我想使用background而非img标签放置图像。
In that one an imgtag is placed, and then with CSS we tribute to the imgtag.
在其中img放置一个标签，然后我们使用 CSS 向该img标签致敬。
width:100%; height:100%;
It works, but that question is a bit old, and states that in CSS 3 resizing a background image will work pretty well. I've tried this example the first one, but it didn't work out for me.
它有效，但这个问题有点老了，并指出在 CSS 3 中调整背景图像的大小会很好地工作。我已经在第一个例子中尝试过这个例子，但它对我没有用。
Is there a good method to do it with the background-imagedeclaration?
有没有好的方法可以用background-image声明来做到这一点？
回答by Vashishtha Jogi
CSS3 has a nice little attribute called background-size:cover.
CSS3 有一个很好的小属性，叫做background-size:cover.
This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too great.
这会缩放图像，使背景区域完全被背景图像覆盖，同时保持纵横比。整个区域将被覆盖。但是，如果调整大小的图像的宽度/高度太大，则部分图像可能不可见。
回答by Matt Burgess
You could use the CSS3 property to do it quite nicely. It resizes to ratio so no image distortion (although it does upscale small images). Just note, it's not implemented in all browsers yet.
您可以使用 CSS3 属性很好地完成它。它会按比例调整大小，因此不会出现图像失真（尽管它确实可以放大小图像）。请注意，它还没有在所有浏览器中实现。
background-size: 100%;
回答by Fábio Antunes
Using the codeI mentioned...
使用我提到的代码...
HTML
HTML
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
CSS
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%;
}
That produces the desired effect: only the content will scroll, not the background.
这会产生预期的效果：只有内容会滚动，背景不会滚动。
The background image resizes to the browser viewport for any screen size. When the content doesn't fit the browser viewport, and the user needs to scroll the page, the background image remains fixed in the viewport while the content scrolls.
对于任何屏幕尺寸，背景图像都会根据浏览器视口调整大小。当内容不适合浏览器视口，并且用户需要滚动页面时，背景图像在内容滚动时保持固定在视口中。
With CSS 3 it seems this would be a lot easier.
使用 CSS 3，这似乎会容易得多。
回答by Fábio Antunes
CSS:
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*/
}
回答by yeahdixon
background-size: 100% 100%;
stretches the background to fill the entire element on both axes.
拉伸背景以填充两个轴上的整个元素。
回答by Thorsten Niehues
The following CSS part should stretch the image with all browsers.
以下 CSS 部分应使用所有浏览器拉伸图像。
I do this dynamically for each page. Therefore I use PHP to generate its own HTML tag for each page. All the pictures are in the 'image' folder and end with 'Bg.jpg'.
我为每个页面动态执行此操作。因此，我使用 PHP 为每个页面生成自己的 HTML 标记。所有图片都在'image'文件夹中，并以'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\')\
";>
If you have only one background picture for all pages then you may remove the $picvariable, remove escaping back-slashes, adjust paths and place this code in your CSS file.
如果所有页面只有一张背景图片，那么您可以删除该$pic变量，删除转义反斜杠，调整路径并将此代码放入您的 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');
}
This was tested with Internet Explorer 9, Chrome 21, and Firefox 14.
这已使用 Internet Explorer 9、Chrome 21 和 Firefox 14 进行了测试。
回答by Kim Stebel
You can actually achieve the same effect as a background image with the img tag. You just have to set its z-index lower than everything else, set position:absolute and use a transparent background for every box in the foreground.
您实际上可以使用 img 标签实现与背景图像相同的效果。您只需将其 z-index 设置为低于其他所有内容，设置 position:absolute 并为前景中的每个框使用透明背景。
回答by RSH1
Use this CSS:
使用这个 CSS：
background: url('img.png') no-repeat;
background-size: 100%;
回答by Arunraj S
You can add this class into your CSS file.
您可以将此类添加到您的 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;
}
It works in:
它适用于：
- Safari 3 or later
- Chrome Whatever or later
- Internet Explorer 9or later
- Opera10 or later (Opera 9.5 supported
background-size, but not the keywords) - Firefox 3.6 or later (Firefox 4 supports non-vendor prefixed version)
- Safari 3 或更高版本
- Chrome 任何版本或更高版本
- Internet Explorer 9或更高版本
- Opera10 或更高版本（支持 Opera 9.5
background-size，但不支持关键字） - Firefox 3.6 或更高版本（Firefox 4 支持非供应商前缀版本）
回答by Aamer Shahzad
It is explained by CSS tricks: Perfect Full Page Background Image
它由 CSS 技巧解释：完美的整页背景图像
Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
演示：https: //css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Code:
代码：
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;
}
