CSSを使用してブラウザウィンドウで画像のサイズを自動的に変更する方法-CSSチュートリアル-php.cn

CSSを使用してブラウザウィンドウで画像のサイズを自動的に変更する方法

Linda Hamilton

リリース： 2024-10-26 04:09:02

オリジナル

430 人が閲覧しました

How to Make Images Automatically Resize with Browser Window Using CSS?

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

問題:

画像が自動的に変更されないブラウザウィンドウのサイズを変更するときにサイズ変更します。次のコードを試しましたが、機能しません:

HTML:

<code class="html"><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html></code>

ログイン後にコピー

CSS:

<code class="css">body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


img { 
    max-width: 100%; 
    height: auto; 
}</code>

ログイン後にコピー

解決策:

画像を柔軟にするには、次の CSS プロパティを追加します。

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

ログイン後にコピー

max-width を 100% に設定すると、画像がコンテナの幅を超えることはなくなります。高さを自動に設定すると、画像のサイズ変更時にアスペクト比を維持できます。 width: auto9 のオーバーライドは、IE8 との互換性のために必要です。

これらのプロパティを設定すると、img タグを使用して追加した画像は、ブラウザウィンドウのサイズに合わせて自動的にサイズ変更されます。

JSFiddle デモ:

この JSFiddle でこのソリューションのライブデモを見ることができます:

https://jsfiddle.net/mjc5ue0z/

このソリューションには JavaScript は必要ありません。 Chrome、Firefox、IE の最新バージョン (テスト済みバージョン) で動作します。

以上がCSSを使用してブラウザウィンドウで画像のサイズを自動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。