拉伸和缩放 CSS 背景

有没有办法在 CSS 中获得背景以进行拉伸或缩放以填充其容器？

答案

使用CSS 3属性background-size ：

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

自 2012 年以来，此功能可用于现代浏览器。

对于现代浏览器，您可以通过使用background-size来实现：

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover表示垂直或水平拉伸图像，因此它永远不会平铺 / 重复。

适用于 Safari 3（或更高版本），Chrome， Opera 10 +，Firefox 3.6 + 和 Internet Explorer 9（或更高版本）。

要使其与较低版本的 Internet Explorer 一起使用，请尝试以下 CSS：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

用 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; }

效果很好！但是，如果裁切了一个尺寸，它将仅在图像的一侧裁切，而不是在两面均等地裁切（居中）。我已经在 Firefox， Webkit和 Internet Explorer 8 中对其进行了测试。