これは些細なことのように思えますが、調査とコーディングをすべて行っても、うまく動作しません。条件は次のとおりです。
- ブラウザ ウィンドウのサイズは不明です。したがって、絶対ピクセル サイズを含むソリューションを提案しないでください。
- 画像の元の寸法は不明であり、ブラウザ ウィンドウに収まるかどうかは不明です。
- 画像は垂直方向と水平方向に中央揃えされます。
- 画像の比率は維持する必要があります。
- 画像はウィンドウ内に完全に表示する必要があります (切り取られない)。
- スクロールバーは表示したくありません (画像が収まる場合は表示されるべきではありません)。
- ウィンドウのサイズが変わると、画像は自動的にサイズが変更され、元のサイズよりも大きくならずに使用可能なスペースをすべて占有します。
基本的に私が望んでいるのはこれです:
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
上記のコードの問題は、それが機能しないことです。垂直スクロール バーを追加することで、画像が必要な垂直スペースをすべて占有します。
私が使えるのは PHP、Javascript、JQuery ですが、CSS のみのソリューションがあれば最高です。IE で動作しなくてもかまいません。
ベストアンサー1
2018-04-11更新
こちらはJavascriptを使わない、CSSのみ解決策。画像はウィンドウに合わせて動的に中央に配置され、サイズが変更されます。
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html>
JQuery を使用した [他の古い] ソリューションでは、画像コンテナーの高さ (body以下の例)を設定してmax-height、画像のプロパティが期待どおりに機能するようにします。クライアント ウィンドウのサイズが変更されると、画像のサイズも自動的に変更されます。
<!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" language="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>
注: ユーザー gutierrezalex は、このページで JQuery プラグインとして非常によく似たソリューションをパッケージ化しました。