ホームページ > 記事 > ウェブフロントエンド > スクロールバーなしで画像をブラウザウィンドウに完璧にフィットさせるにはどうすればよいですか?
スクロールバーなしで画像をブラウザウィンドウに完璧にフィットさせるにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-11-01 07:33:02741ブラウズ
ブラウザ ウィンドウにぴったり収まるように画像のサイズを変更する方法
ブラウザ ウィンドウの範囲内に収まるように画像のサイズを変更すると、問題が生じる可能性がありますこれは、特にウィンドウ サイズ、画像のサイズ、スクロールバーなどのさまざまな要素を考慮する必要がある場合に、課題となります。
問題:
目標は、画像のサイズを維持することです。アスペクト比を調整し、スクロールバーの表示を防ぎ、画像が元のサイズを超えずに最大の利用可能なスペースを占めるようにします。
CSS のみの解決策:
更新 ( 2018-04-11):
<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 ソリューション:
<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
* { padding: 0; margin: 0; }
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="pic.jpg" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html></code>
JQuery ソリューションには、ウィンドウの高さに一致するように本体の高さを設定することが含まれます。これにより、画像の max-height プロパティが意図したとおりに機能し、画像をウィンドウの境界内に制限できるようになります。さらに、ウィンドウのサイズを変更すると、画像のサイズも自動的に変更されます。
以上がスクロールバーなしで画像をブラウザウィンドウに完璧にフィットさせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。