0

我在以下 div 中有一个背景图像。

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

我想根据窗口大小（手机、平板电脑等）调整此徽标 div 的大小。这怎么可能？请帮我。

4

5 回答 5

2

查看background-size

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

于 2013-07-17T04:54:24.747 回答
0

如果你想让任何东西依赖于窗口大小，你可能想看看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>
于 2013-07-17T05:02:26.330 回答
0

使用background-size CSS 属性

例如

background-size:100px 50px;
于 2013-07-17T06:40:51.260 回答
0

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

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

}

于 2013-07-17T06:57:35.993 回答
-1

使用 css id 标签，这样当您调用带有该 id 的标签时，它会以不同的方式呈现。

于 2013-07-17T04:53:31.050 回答