ホームページ > 記事 > ウェブフロントエンド > ブラウザウィンドウに合わせて画像のサイズを動的に変更するにはどうすればよいですか?
ブラウザウィンドウに合わせて画像のサイズを動的に変更するにはどうすればよいですか?
- Linda Hamiltonオリジナル
- 2024-10-31 01:17:29684ブラウズ
ブラウザ ウィンドウに合わせて画像のサイズを動的に変更する方法
アスペクト比を維持しながら画像をブラウザ ウィンドウ内に収めることで、完全に表示されるため、スクロールバーを防ぐことが困難になることがよくあります。これらの問題に効果的に対処するための 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 までご連絡ください。