拉伸和缩放CSS背景

使用该border-image : yourimage属性设置图像并将其缩放到屏幕或窗口的整个边框。

SolidSmile作弊的另一个技巧是通过设置宽度并使用自动设置高度来缩放（按比例重新调整大小）。

例如：

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

这里的另一个伟大的解决方案是Srobbin的终点直道可以应用到身体或任何元素在页面上- http://srobbin.com/jquery-plugins/backstretch/

我想指出的是，这等效于：

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

尝试这个

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

这就是我所做的。在拉伸班上，我只是将高度更改为auto。这样，背景图片始终具有与屏幕宽度相同的尺寸，并且高度始终具有正确的尺寸。

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

定义“拉伸和缩放” ...

如果您具有位图格式，则通常无法将其拉伸并拉动。您可以使用可重复模式来产生相同效果的错觉。例如，如果您的渐变朝向页面底部变浅，则可以使用单个像素宽且与容器高度相同的图形（最好考虑到缩放比例，选择更大的图形），然后将其平铺在页。同样，如果渐变跨过页面，则它将比您的容器高1像素宽，然后在页面上向下重复。

通常，为了使容器增大或缩小时，它可以拉伸以填充容器，使图像比容器大。任何重叠都不会显示在容器范围之外。

如果您想要的效果依赖于具有弯曲边缘的盒子之类的东西，那么您应该将盒子的左侧粘贴到容器的左侧，并且要有足够的重叠，以至于（在一定程度上）无论容器有多大，它都不会用尽了背景，然后在带有弯曲边缘的框的右侧图像上分层并将其放置在容器的右侧。因此，随着容器的收缩或增长，弯曲的盒子效果似乎随之收缩或增长-实际上并没有，但它给人以错觉。

至于真正使图像随容器缩小和增长，您需要使用一些分层技巧来使图像看起来像是背景，并需要一些JavaScript来随容器调整大小。目前没有使用CSS的方法...

如果您正在使用矢量图形，恐怕您就超出了我的专业领域。

一言以蔽之：没有。拉伸图像的唯一方法是使用<img>标签。您必须要有创造力。

在写答案时，这在2008年是正确的。今天，现代的浏览器支持background-size解决了这个问题。注意IE8不支持它。

不是现在。它会在CSS 3中提供，但是要在大多数浏览器中实现它需要一些时间。

在CSS3中使用background-size属性：

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

编辑： Modernizr支持检测背景大小的支持。您可以使用编写的JavaScript解决方法来工作，但是您需要它，并且在没有支持的情况下动态加载它。这将保持代码的可维护性，而无需借助某些浏览器的侵入式CSS hack。

我个人使用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 [s] e感兴趣。

尝试文章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%;
} 

使用CSS 3属性background-size：

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

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