简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

Linda Hamilton
リリース： 2024-10-26 04:09:02
オリジナル
318 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：## 表を使用すると、印刷ページでヘッダーとフッターを繰り返すという課題を解決できますか? 次の記事：以下に、内容を要約した質問ベースの記事タイトルをいくつか示します。 直接的かつ有益: * iOS 7 iPad ランドスケープ モードで window.innerHeight が wi​​ndow.outerHeight と異なるのはなぜですか? * どのようにして
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1681
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1833
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1560
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1466
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！