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

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

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

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

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

<code class="html"><div class="imgbox">
  <img  class="center-fit lazy" src="/static/imghwm/default1.png" data-src="pic.png" alt="ブラウザウィンドウに合わせて画像のサイズを動的に変更するにはどうすればよいですか?" >
</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">
  <img  class="center fit lazy" src="/static/imghwm/default1.png" data-src="pic.jpg" alt="ブラウザウィンドウに合わせて画像のサイズを動的に変更するにはどうすればよいですか?" >
</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 サイトの他の関連記事を参照してください。