Question

我在下面的div中有一个背景图片。

#logo {
    margin-top: 15px;
    min-height: 75px;
    min-width: 75px;
    background: url(rotarywheel.png) no-repeat;
    float: left;
}

我想根据窗口大小（手机，平板电脑等）调整此徽标div的大小。如何才有可能？请帮帮我。

Answer 1

查看background-size

background-size CSS属性指定背景图像的大小。图像的大小可以完全约束，也可以仅部分限制，以保持其固有比率。

Answer 2

如果您想根据窗口大小制作任何内容，您可能需要查看media queries。这是从该页面顶部的示例修改的：

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
    #logo {
        width: 500px;
        height: 200px;
        background-image: url('500-200-bg.png') no-repeat;
    }
}
</style>

Answer 3

使用 background-size CSS属性

例如

background-size:100px 50px;

Answer 4

使用百分比和宽度的背景大小。因为你有相同的宽度和高度比率。

#logo {
margin-top: 15px;
min-height:75px;
min-width: 75px; /*value in percentage or em;*/
background: url(rotarywheel.png) no-repeat;
background-size:25%;  /*value in percentage or em;*/
float: left;

}

Answer 5

使用css id标签，这样当你调用带有该id的标签时，它将呈现不同的颜色。

使用css调整div的背景图像

5 个答案: