有没有办法让CSS中的背景拉伸或缩放以填充其容器？
使用CSS 3属性background-size：
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
自2012年起，这适用于现代浏览器。
要保留图像的纵横比，您应该使用"background-size：cover;"或"background-size：contain;"。我已经构建了一个在IE8中实现这些值的polyfill：github.com/louisremi/background-size-polyfill
我知道这已经有一年了，但我必须(笑)并同意'体面的浏览器'部分。检查所有浏览器，但我遇到的IE问题比其中任何一个都多。
我必须设置background-size: 100% 100%;以获得我想要的效果，如果这有助于其他任何人。
@ Louis-Rmi如何使用"封面"两个方向中心？
@ceving add background-position:50% 50% - 然后将其用作原点。
MDN上cover和contain的解释
guanome谢谢，这解决了我的问题。封面和包含在我的场景中不起作用。
这实际上不起作用。问题是填充容器，这意味着我们希望它伸展，所以它不会重复。另一方面，如果高度不覆盖该区域，则该答案将在高度方向上重复。"拉伸填充"意味着伸展，但你必须这样，它不会重复。正确答案是从下面"掩盖"。这实际上处理的情况并非如此。
对于现代浏览器，您可以使用background-size完成此操作：
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover表示垂直或水平拉伸图像，因此它永远不会平铺/重复。
这适用于Safari 3(或更高版本)，Chrome，Opera 10 +，Firefox 3.6+和InternetExplorer9(或更高版本)。
要使用较低版本的InternetExplorer，请尝试以下CSS：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
致克莱门特：您对之前IE的过滤器的建议是什么：仅部分工作。它可以缩放图片宽度，但高度缩放会因为不限制任何内容而出错。页面越高，背景图片就越高.. =(我在IE8上尝试了这个。而且，无论如何可能使用这些'封面'命令并以某种方式使其与iphone等手机兼容？我知道有视口问题但是可能有可能将视口缩放到整个屏幕，背景在这里缩放吗？感谢您的回复！
特定于IE的过滤器不是理想的解决方案，因此可以随意使用CSS替代IE。我个人在我自己的网站上使用CSS3"封面"，它在iOS设备上运行正常，只需确保定义设备宽度。
封面不会拉伸bg。 100％100％是的。
这个解决方案最适合我，我不想在水平或垂直方向上拉伸图像，而不是实际分辨率。谢谢..！！
使用CSS缩放图像是不可能的，但是可以通过以下方式实现类似的效果。
使用此标记：
使用以下CSS：
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
你应该完成！
为了将图像缩放为"全出血"并保持纵横比，您可以这样做：
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
它运作得很好！但是，如果裁剪了一个尺寸，它将仅在图像的一侧裁剪，而不是在两侧均匀裁剪(并居中)。我在Firefox，Webkit和InternetExplorer8中测试过它。
这很好用......但是正在寻找一些更强大的东西(可能还有javascript)，它也会根据图片是横向还是纵向进行调整。如果有人有这方面的解决方案会喜欢链接...谢谢！
如果其他人感兴趣，这似乎运作良好：buildinternet.com/project/supersized
可以使用margin: 0 auto在.stretch上完成水平居中。仅设置width或height，纵横比保持不变。尝试使用max-width和max-height来限制缩放系数...
这在ie8 / ie9中对我不起作用，但在ie6 / ie7(当然还有所有其他浏览器)中工作。在ie8 / ie9中，图像仅显示div的约3/4。有人有同样的问题吗？
对于ie7，设置.stretch { height: auto }在我的情况下工作，而height:100%没有。否则很棒的解决方案谢
SO的一个缺陷：没有办法标记不再正确的答案，导致像@Ullas这样的人被误入歧途。在所有现代浏览器中缩放背景很容易。 developer.mozilla.org/en/CSS/background-size
如果答案的原作者选择在不再适用时不撤回/改进他们的答案，那么这并不是一个真正的缺陷。主持人或适当特权(和受信任)的个人应该采取此类行动。请随意在meta.stackoverflow.com中处理此事，因为我不会在这里进一步讨论此事。
遗憾的是，例如编译旧机器和新机器的chms。但要获得这个以及使用像@media和jqery这样的东西的公认答案都不会很漂亮！
在CSS3中使用background-size属性：
.class {
background-image: url(bg.gif);
background-size: 100%;
}
编辑：Modernizr支持检测背景大小的支持。您可以使用编写的JavaScript变通方法，但是在没有支持的情况下，您需要它并动态加载它。这样可以保持代码的可维护性，而不需要针对某些浏览器使用侵入式CSS攻击。
我个人使用脚本来处理它使用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;
}
编辑：
您可能也对jQuery CSS3 Finaliz ▼显示 e感兴趣。
需要强调的是，Modernizr不支持在本机上不支持它的浏览器中支持背景大小。它只是一个方便的跨浏览器测试。当测试返回false时，由你来伪造它。
试试文章背景大小。如果您使用以下所有内容，它将适用于除InternetExplorer之外的大多数浏览器。
.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%;
}
谢谢！这与"background-size：cover"不同
这在ipad上为我拉伸，但没有扩展。 thx发布。
这非常适合使背景缩小。谢谢！
如果背景图像是SVG，则还需要在SVG中指定preserveAspectRatio="none"。有关这方面的更多信息。在这里演示。
.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;
}
适用于：
Safari 3+
Chrome无论如何+
IE 9+
Opera 10+(Opera 9.5支持背景大小但不支持关键字)
Firefox 3.6+(Firefox 4支持非供应商前缀版本)
此外，您可以尝试这个解决方案
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
感谢Chris Coyier撰写的这篇文章
这比"背景大小：封面"更好还是更好？
@PKHunter，我不确定你到底在做什么。这是使用background-size: cover，除了浏览器前缀和IE解决方案
不是现在。它将在CSS 3中提供，但它需要一些时间才能在大多数浏览器中实现。
A List Apart提供的精彩文章：请超越背景！
-1我不认为这个答案非常相关......并且它没有提供任何类型的解决方案。
@Potherca这个答案当时是正确的(差不多3年前)。
显示日期是有原因的。它应该保留供历史参考。你是否正在浏览网站上的所有旧答案并低估它们？即使从那时起添加了更多信息，答案仍然是正确的。还要注意，这里的其他答案基本上是相同的(有些确实是不正确的 - 他们说这是不可能的)。因为它有一些投票，我得到你在这一个选择的感觉。
不，我选择了这一个，因为所有这一切都说"计算机说不"，即使在2008年有这个问题有几个解决方案;-)
总而言之：不。拉伸图像的唯一方法是使用标记。你必须要有创意。 s>
这个问题曾经写于2008年。今天，现代浏览器支持background-size，它解决了这个问题。请注意，IE8不支持它。
@Blowsie - 可爱。检查答案日期。在过去的5年中，浏览器格局发生了一些变化。
定义"伸展和缩放"......
如果你有一个位图格式，那么拉伸它并拉动它通常不是很好(从图形上讲)。您可以使用可重复的模式来产生相同效果的错觉。例如，如果你的页面底部有一个较浅的渐变，那么你可以使用一个像素宽的图形和与容器相同的高度(或者最好更大以考虑缩放)，然后将其平铺在页。同样，如果梯度跨越页面，它将比容器高一个像素并且比页面重复一样。
通常，当容器增长或收缩时，为了使其伸展以填充容器，您可以使图像大于容器。任何重叠都不会显示在容器的边界之外。
如果你想要一个依赖于像弯曲边缘的盒子那样的效果，那么你可以将盒子的左侧粘到容器的左侧，并且有足够的重叠(在合理范围内)，无论容器有多大，它都不会用完背景，然后用弯曲的边缘对图像右侧的图像进行分层，并将其放置在容器的右侧。因此，当容器收缩或增长时，弯曲的盒子效果似乎随之缩小或增长 - 事实上并非如此，但它给人的幻觉就是正在发生的事情。
至于真正使图像缩小并随容器一起增长，你需要使用一些分层技巧使图像看起来像一个背景和一些javascript来调整容器的大小。目前还没有用CSS做到这一点的方法......
如果你正在使用矢量图形，那么你恐怕不在我的专业领域之外。
拉伸=改变x和y尺寸，独立改变图像的纵横比，比例=按比例改变x和y尺寸，保持图像的纵横比。
@SoftwareMonkey：作为背景，然后不，你不能改变直接CSS中真正意义上的拉伸和比例。你必须使用各种CSS技巧来表达这种情况，正如我所描述的那样。
这就是我所做的。在拉伸类中，我只是将高度更改为auto。这样你的背景图片总是与屏幕的宽度相同，高度总是大小合适。
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
我想指出，这相当于：
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
另一个很好的解决方案是Srobbin的Backstretch，它可以应用于身体或页面上的任何元素 - http://srobbin.com/jquery-plugins/backstretch/
尼克，我们通常会要求您在答案中提供显着部分，并提供外部链接仅用于进一步的详细信息 - 这有助于答案在链接腐烂时仍然有用。
我的错。一般来说，你将backstretch添加到文档的然后初始化如下：$("。your-element")。backstretch("path / to / image.jpg");
试试这个
http://jsfiddle.net/5LZ55/4/
body
{
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
添加background-attachment行：
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
SolidSmile作弊的另一个提示是通过设置宽度并使用auto作为高度来缩放(按比例调整大小)。
例如：
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
使用border-image : yourimage属性设置图像并将其缩放到屏幕或窗口的整个边框。
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
