ブラウザウィンドウに合わせて画像のサイズを動的に変更するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

ブラウザウィンドウに合わせて画像のサイズを動的に変更するにはどうすればよいですか?

Linda Hamilton

Oct 31, 2024 am 01:17 AM

How to Dynamically Resize an Image to Fit the Browser Window?

ブラウザウィンドウに合わせて画像のサイズを動的に変更する方法

アスペクト比を維持しながら画像をブラウザウィンドウ内に収めることで、完全に表示されるため、スクロールバーを防ぐことが困難になることがよくあります。これらの問題に効果的に対処するための 2 つの包括的なアプローチを次に示します。

1. CSS のみのソリューション (2018 年更新)

CSS のグリッドレイアウトと自動余白機能を活用するこの方法は、包括的な CSS のみのソリューションを提供します。以下のコードスニペットは、ブラウザウィンドウに合わせて画像を動的に中央揃えにしてサイズ変更します。

<code class="html"><div class="imgbox">
  <img class="center-fit" src="pic.png">
</div></code>

ログイン後にコピー

CSS:

<code class="css">    * {
        margin: 0;
        padding: 0;
    }
    .imgbox {
        display: grid;
        height: 100%;
    }
    .center-fit {
        max-width: 100%;
        max-height: 100vh;
        margin: auto;
    }</code>

ログイン後にコピー

2. JavaScript/jQuery ソリューション

このアプローチは、jQuery に依存して画像コンテナーの高さを動的に設定し、画像の max-height プロパティが意図したとおりに機能できるようにします。ブラウザウィンドウのサイズが変更されると、画像のサイズが自動的に調整されます。

<code class="html"><body>
  <img class="center fit" src="pic.jpg">
</body></code>

ログイン後にコピー

<code class="javascript">    // Set body height to window height
    function set_body_height() {
        $('body').height($(window).height());
    }
    // On DOM ready and window resize, adjust body height
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });</code>

ログイン後にコピー

注: 同様のソリューションは、ユーザー Gutierrezalex が作成した jQuery プラグインとして利用できます。

以上がブラウザウィンドウに合わせて画像のサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。