拉伸和缩放CSS背景

Question

拉伸和缩放CSS背景

是否有一种方法可以在CSS中获得一个背景来拉伸或缩放来填充它的容器？

Answer 1

对于现代浏览器，您可以使用background-size:body {     background-image: url(bg.jpg);     background-size: cover;}cover意思是将图像垂直地或水平地拉伸，这样它就不会平铺/重复。这将适用于Safari 3(或更高版本)，Chrome，歌剧10+、Firefox 3.6+和InternetExplorer 9(或更高版本)。要使其与InternetExplorer的较低版本一起工作，请尝试以下CSS：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Answer 2

使用CSS 3财产background-size:#my_container {     background-size: 100% auto; /* width and height, can be %, px or whatever. */}从2012年起，现代浏览器就可以使用这一功能了。

Answer 3

使用CSS缩放图像并不完全可能，但是可以通过以下方式实现类似的效果。使用此标记：<div&nbsp;id="background"> &nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="img.jpg"&nbsp;class="stretch"&nbsp;alt=""&nbsp;/></div>使用以下CSS：#background&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;0;}.stretch&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;height:100%;}你就该完蛋了！为了将图像缩放为“完全出血”并保持高宽比，您可以这样做：.stretch&nbsp;{&nbsp;min-width:100%;&nbsp;min-height:100%;&nbsp;width:auto;&nbsp;height:auto;&nbsp;}效果很好！但是，如果一个维度被裁剪，它将只被裁剪在图像的一侧，而不是两边都被平均裁剪(并且居中)。我在火狐上测试过，WebKit，以及InternetExplorer 8。