画像をブラウザ ウィンドウにぴったりと合わせるにはどうすればよいですか?

ブラウザ ウィンドウに完全にフィットするように画像のサイズを変更する方法

画像をブラウザ ウィンドウ内にシームレスにフィットさせるには、特に次のような課題が生じることがあります。不明なブラウザのサイズと画像の比率。ただし、このサイズ変更機能は、よく練られたアプローチで実現できます。

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

最新の CSS をサポートするブラウザーの場合、純粋にCSS ソリューションは次のように実装できます。

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

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

このソリューションは CSS グリッドを使用し、ブラウザ ウィンドウ内の画像のサイズを動的に変更して中央に配置します。

jQuery ソリューション

別のアプローチでは、jQuery を利用してボディの高さをウィンドウの高さに等しく設定し、画像の max-height プロパティが期待どおりに機能できるようにします。

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

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

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

これ解決策には、ウィンドウの高さに合わせて本体の高さを設定し、ウィンドウの寸法の変化に応じて画像のサイズを動的に変更できるようにすることが含まれます。

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