html - cssを使用してdivの背景画像のサイズを変更する

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 をパーセンテージで使用し、幅も使用します。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;

}

Answer 2

background-size CSS プロパティを使用する

例えば

background-size:100px 50px;

Answer 3

ウィンドウサイズに依存するものを作成したい場合は、おそらくメディアクエリを見たいと思うでしょう。これは、そのページの上部にある例から変更されています。

<!-- 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>