我希望我的背景图像拉伸和缩放取决于浏览器视口的大小。
我在Stack Overflow上看到过一些问题，比如拉伸和缩放CSS背景。它工作得很好，但我想使用背景放置图像，而不是使用img标签。
在其中放置了一个img标签，然后用CSS向img标签致敬。
width:100%; height:100%;
它的工作，但这个问题有点老了，并指出在css3调整背景图像的大小将工作得很好。我已经尝试了第一个例子，但它不适合我。
是否有一个好的方法来做背景图像声明?
当前回答
您希望仅使用一个图像就实现这一点吗?因为你可以用两张图片来做一个类似的背景拉伸。比如PNG图片。
我以前做过这个，并不难。此外，我认为拉伸只会损害背景的质量。如果你添加一个巨大的图像，它会减慢缓慢的电脑和浏览器。
其他回答
CSS3有一个漂亮的小属性，叫做background-size:cover。
这将缩放图像，使背景区域完全被背景图像覆盖，同时保持纵横比。整个区域将被覆盖。但是，如果调整后的图像的宽度/高度太大，则部分图像可能不可见。
使用下面的CSS:
background: url('img.png') no-repeat;
background-size: 100%;
这是由CSS技巧解释的:完美的全页面背景图像
演示:https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
代码:
body {
background: url(images/myBackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
CSS:
html,body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
谢谢!
但后来在谷歌Chrome和Safari浏览器上就不行了(拉伸可以，但图片的高度只有2毫米!)，直到有人告诉我缺少什么:
尝试设置高度:auto;min-height:100%;
所以根据你的身高来改变:100%;线,给:
#### #background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:auto;
min-height:100%;
}
就在新添加的代码之前，我在Drupal Tendu themes style.css中有这样的代码:
html,身体{高度:100%;} 页面#{背景:# ffffff;高度:汽车!重要;高度:100%,最低高度:100%;位置:相对;}
然后，我必须在Drupal中创建一个新的块，同时添加class=stretch:
< img alt=“” class=“stretch” src=“pic.url” />
只是用Drupal块中的编辑器复制图片是行不通的;必须将编辑器更改为非格式化文本。
