ホームページ > 記事 > ウェブフロントエンド > 歪みなくブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいですか?
歪みなくブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-11-01 15:51:55976ブラウズ
歪みなくブラウザ ウィンドウに合わせて画像のサイズを変更する
ブラウザ ウィンドウに合わせて画像のサイズを変更することは、一見簡単な解決策のように見える一般的なタスクです。ただし、比率を維持したりトリミングを回避したりするなど、特定の要件に従うと課題が生じる可能性があります。
スクロールバーと Javascript を使用しないソリューション (CSS のみ)
<code class="html"><html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh; /* vh ensures height matches browser window */
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html></code>
これこのソリューションでは CSS グリッドを使用して、画像コンテナーがウィンドウの高さ全体を占めるようにします。次に、画像はそのコンテナ内に水平方向と垂直方向に収まるように設定され、アスペクト比が維持され、スクロールバーの追加が回避されます。
JQuery による解決策
JavaScript が使用可能な場合、別のアプローチは次のとおりです:
<code class="html"><html>
<body>
<img class="center fit" src="pic.jpg" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function set_body_height() {
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html></code>
ここでは、ボディの高さがウィンドウの高さに一致するように設定されており、画像の max-height プロパティが正しく機能することが保証されています。ウィンドウのサイズ変更イベントも処理され、ウィンドウのサイズが変更されたときに本体の高さと画像サイズが自動的に調整されます。
以上が歪みなくブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQueryでテキストを点滅させる方法?次の記事：jQueryでテキストを点滅させる方法?