Question

我似乎无法将我的背景图像垂直拉伸（使用CSS）并且无法获得它。在不使用jquery插件的情况下，最好的方法是什么？

目前有

div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}

Answer 1

虽然问题不清楚，但我认为您希望房屋出现在页面底部？

body除非必须，否则不会填满屏幕。因此，您的whitewrap div仅填充body的100％。

你需要将身高设置为100％（虽然这有点hacky）或者将body的背景设置为图像。然后，这将在屏幕底部显示背景图像（尽管身体不是完整的高度 - 令人困惑的权利？）。

你的HTML很难检查，但是，由于（我假设）你用来创建它的软件添加的div比我想象的更多！

经过仔细检查后，

编辑，看起来好像需要设置background-position属性以强制将图片置于底部。然后，您可以将background-color设置为与图像顶部的天空颜色相同。这应该创造你想要的效果，而不必实际拉伸＆amp;扭曲你的形象。

Answer 2

您可以使用CSS完全执行此操作：使用background-size属性。

body {
    background-image: url(http://placekitten.com/250/150);
    background-size: 100%;
    }

见http://jsfiddle.net/5TSVP/。

Answer 3

您应该查看CSS中的媒体查询，并为主要平台存储不同的分辨率图像。然后可以使用浏览器在图像之间调整图像大小。

媒体查询：http://www.w3.org/TR/css3-mediaqueries/

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

CSS for img tag让它调整大小：

img { max-width:100%; }

CSS垂直拉伸到背景

3 个答案: