Html 拉伸和缩放 CSS 背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/376253/
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 CSS background
提问by Lawrence Dol
Is there a way to get a background in CSS to stretch or scale to fill its container?
有没有办法在 CSS 中获取背景以拉伸或缩放以填充其容器？
采纳答案by Clement
For modern browsers, you can accomplish this by using background-size:
对于现代浏览器，您可以通过使用background-size：
body {
background-image: url(bg.jpg);
background-size: cover;
}
covermeans stretching the image either vertically or horizontally so it never tiles/repeats.
cover意味着垂直或水平拉伸图像，因此它永远不会平铺/重复。
That would work for Safari 3 (or later), Chrome, Opera10+, Firefox 3.6+, and Internet Explorer 9 (or later).
这适用于 Safari 3（或更高版本）、Chrome、Opera10+、Firefox 3.6+ 和 Internet Explorer 9（或更高版本）。
For it to work with lower verions of Internet Explorer, try these CSS:
要使其与较低版本的 Internet Explorer 一起使用，请尝试以下 CSS：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
回答by vinyll
回答by SolidSmile
Scaling an image with CSS is not quite possible, but a similar effect can be achieved in the following manner, though.
使用 CSS 缩放图像不太可能，但是可以通过以下方式实现类似的效果。
Use this markup:
使用此标记：
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
with the following CSS:
使用以下 CSS：
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
and you should be done!
你应该完成！
In order to scale the image to be "full bleed" and maintain the aspect ratio, you can do this instead:
为了将图像缩放为“全出血”并保持纵横比，您可以这样做：
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
It works out quite nicely! If one dimension is cropped, however, it will be cropped on only one side of the image, rather than being evenly cropped on both sides (and centered). I've tested it in Firefox, Webkit, and Internet Explorer 8.
效果很好！但是，如果裁剪一维，它将仅在图像的一侧裁剪，而不是在两侧（并居中）均匀裁剪。我已经在 Firefox、Webkit和 Internet Explorer 8 中对其进行了测试。
回答by Metalshark
Use the background-size attributein CSS3:
在 CSS3 中使用background-size 属性：
.class {
background-image: url(bg.gif);
background-size: 100%;
}
EDIT:Modernizrsupports detection of background-size support. You can use a JavaScript workaround written to work however you need it and load it dynamically when there is no support. This will keep the code maintainable without resorting to intrusive CSS hacks for certain browsers.
编辑：Modernizr支持检测 background-size support。您可以使用编写的 JavaScript 解决方法，但您需要它并在没有支持时动态加载它。这将保持代码的可维护性，而无需对某些浏览器采用侵入性 CSS hack。
Personally I use a script to deal with it using jQuery, its an adaption of imgsizer. As most designs I do now use width %'s for fluid layouts across devices there is a slight adaptation to one of the loops (accounting for sizes that aren't always 100%):
我个人使用一个脚本来处理它，使用 jQuery，它是imgsizer的改编版。正如我现在所做的大多数设计一样，跨设备的流体布局使用宽度 % 对循环之一进行了轻微的调整（考虑到并非总是 100% 的大小）：
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
EDIT:You may also be interested in jQuery CSS3 Finaliz[s]e.
编辑：您可能也对jQuery CSS3 Finaliz[s]e感兴趣。
回答by alekwisnia
Try the article background-size. If you use all of the following, it will work in most browsers except Internet Explorer.
试试文章background-size。如果您使用以下所有内容，它将在除 Internet Explorer 之外的大多数浏览器中工作。
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
回答by Blowsie
.style1 {
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;
}
Works in:
工作于：
- Safari 3+
- Chrome Whatever+
- IE 9+
- Opera 10+ (Opera 9.5 supported background-size but not the keywords)
- Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
- 野生动物园 3+
- Chrome 随心所欲+
- 浏览器 9+
- Opera 10+（Opera 9.5 支持背景大小但不支持关键字）
- Firefox 3.6+（Firefox 4 支持非厂商前缀版本）
In addition you can try this for an ie solution
此外，您可以尝试使用此 ie 解决方案
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
Credit to this article by Chris Coyier http://css-tricks.com/perfect-full-page-background-image/
感谢 Chris Coyier 撰写的这篇文章 http://css-tricks.com/perfect-full-page-background-image/
回答by Eran Galperin
回答by Vilx-
In one word: no. The only way to stretch an image is with the <img>tag. You'll have to be creative.
一句话：没有。拉伸图像的唯一方法是使用<img>标签。你必须要有创意。
This used to be true in 2008, when the answer was written. Today modern browsers support background-sizewhich solves this problem. Beware that IE8 doesn't support it.
在 2008 年写下答案时曾经是这样。今天现代浏览器支持background-size解决了这个问题。请注意 IE8 不支持它。
回答by BenAlabaster
Define "stretch and scale"...
定义“拉伸和缩放”...
If you've got a bitmap format, it's generally not great (graphically speaking) to stretch it and pull it about. You can use repeatable patterns to give the illusion of the same effect. For instance if you have a gradient that gets lighter towards the bottom of the page, then you would use a graphic that's a single pixel wide and the same height as your container (or preferably larger to account for scaling) and then tile it across the page. Likewise, if the gradient ran across the page, it would be one pixel high and wider than your container and repeated down the page.
如果您有位图格式，通常不太好（从图形上讲）拉伸它并拉动它。您可以使用可重复的图案来产生相同效果的错觉。例如，如果您的渐变向页面底部变亮，那么您将使用一个像素宽且与容器高度相同的图形（或最好更大以考虑缩放），然后将其平铺在整个页。同样，如果渐变穿过页面，它会比容器高一个像素，宽一个像素，并在页面上重复。
Normally to give the illusion of it stretching to fill the container when the container grows or shrinks, you make the image larger than the container. Any overlap would not be displayed outside the bounds of the container.
通常，为了在容器增大或缩小时产生拉伸以填充容器的错觉，您可以使图像大于容器。任何重叠都不会显示在容器边界之外。
If you want an effect that relies on something like a box with curved edges, then you would stick the left side of your box to the left side of your container with enough overlap that (within reason) no matter how large the container, it never runs out of background and then you layer an image of the right side of the box with curved edges and position it on the right of the container. Thus as the container shrinks or grows, the curved box effect appears to shrink or grow with it - it doesn't in fact, but it gives the illusion that is what's happening.
如果您想要依赖于具有弯曲边缘的盒子之类的效果，那么您可以将盒子的左侧粘贴到容器的左侧并有足够的重叠（在合理范围内），无论容器有多大，它永远不会用完背景，然后将带有弯曲边缘的框右侧的图像分层并将其放置在容器的右侧。因此，随着容器的缩小或增长，弯曲的盒子效应似乎也随之缩小或增长——事实上并非如此，但它给人一种正在发生的错觉。
As for really making the image shrink and grow with the container, you would need to use some layering tricks to make the image appear to function as a background and some javascript to resize it with the container. There's no current way of doing this with CSS...
至于真正让图像随着容器缩小和增长，您需要使用一些分层技巧来使图像看起来像背景一样，并使用一些 javascript 来调整它与容器的大小。目前没有办法用 CSS 做到这一点......
If you're using vector graphics, you're way outside my realm of expertise I'm afraid.
如果您使用矢量图形，恐怕您已经超出了我的专业领域。
回答by Edward
This is what I've made of it. In the stretch class, I simply changed the height to auto. This way your background picture has always got the same size as the width of the screen and the height will allways have the right size.
这是我用它做的。在拉伸课中，我只是将高度更改为auto. 这样你的背景图片总是和屏幕的宽度一样大，高度也总是合适的。
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
