「background-size: cover」を使用して画像をレスポンシブにし、フルスクリーンの背景を維持する方法

CSS を使用してブラウザのサイズに合わせて画像のサイズを自動的に変更する

この質問の目標は、ブラウザ ウィンドウのサイズが変更されたときに画像のサイズも自動的に変更されるようにすることです。

これを実現するには、次のように CSS コードを変更するだけです。

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

max-width を 100 に設定することで、 % と高さを自動に設定すると、画像はブラウザのウィンドウ サイズに応じて拡大縮小されます。幅: auto9;このルールはブラウザ間で一貫した動作を保証するための IE8 専用です。

さらに、背景画像にbackground-size: cover プロパティを割り当てて全画面効果を作成できます。

<code class="css">body {
    ...
    background-size: cover;
}</code>

これらを使用すると、変更すると、指定された背景効果を維持しながら画像のサイズが自動的に変更され、完全にレスポンシブなデザインが保証されます。

以上が「background-size: cover」を使用して画像をレスポンシブにし、フルスクリーンの背景を維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。