ホームページ  >  記事  >  ウェブフロントエンド  >  画像をブラウザ ウィンドウにぴったりと合わせるにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-10-31 07:24:30662ブラウズ

How to Make an Image Fit Perfectly in a Browser Window?

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

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

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

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