拉伸和缩放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 id="background">
    <img src="img.jpg" class="stretch" alt="" /></div>

使用以下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; }

效果很好！但是，如果一个维度被裁剪，它将只被裁剪在图像的一侧，而不是两边都被平均裁剪(并且居中)。我在火狐上测试过，WebKit，以及InternetExplorer 8。