Question

我希望我的背景图像能够自我缩放以适应不同分辨率的屏幕。我不是在寻找像 background-size：cover 这样的东西，我总是希望看到我的背景图像的完整视图。

例如，如果我的背景只是一张像500x1000的树的图像，我总是希望在背景上看到整棵树，而不是缩放以使其成为整页并仅显示树的一部分。

我尝试使用 background-size：进行不同的操作，但似乎没有任何效果。这是我在CSS中的内容

body 
{
    margin: 0;
    padding: 0;
    background: #fffff;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-size: 100%;
    background-image:url(main_bg.jpg);
    background-repeat:no-repeat;
    background-size:contain Auto;
}

非常感谢任何帮助。

编辑：刚刚找到解决我问题的方法。我不得不将所有背景属性移动到css的html部分而不是正文：P

Answer 1

您应该尝试为html和body添加100％的高度，然后尝试调整图像大小

html,body {height:100%;}

-

body 
{
    margin: 0;
    padding: 0;
    background: #fffff;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-size: 100%;
    background-image:url(main_bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
}

或

body 
{
    margin: 0;
    padding: 0;
    background: #fffff;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-size: 100%;
    background-image:url(main_bg.jpg);
    background-repeat:no-repeat;
    background-size:100% auto;
}

Answer 2

你不能这样做：

background-size: 100%

Answer 3

我会用这个：

HTML：

<body>
    <img src='main_bg.jpg'>
</body>

CSS：

body {
height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}

img {
 height: 100%;
 padding: 0;
 margin: 0;
}

如果它不适合您，“只有”JavaScript可以帮助您。

缩放背景的高度以获得不同的分辨率

3 个答案: