BinaryDevelop
  1. ホーム
  2. html

[解決済み] ブラウザのウィンドウに収まるように画像をリサイズするには？

2022-05-07 02:02:38

質問内容

これは些細なことに思えるのですが、いろいろ調べてコーディングした結果、うまくいきません。条件は以下の通りです。

  1. ブラウザのウィンドウサイズが不明である。そのため、絶対的なピクセルサイズを含む解決策を提案しないでください。
  2. 画像の元の寸法は不明で、すでにブラウザのウィンドウにフィットしているかどうかも不明です。
  3. 画像は縦と横の中央に配置されています。
  4. 画像のプロポーションが保たれていること。
  5. 画像はウィンドウ内に全体が表示されること（トリミング不可。）
  6. スクロールバーが表示されないようにしたい（画像が収まる範囲であれば表示されないはずです。）
  7. 画像は、ウィンドウの大きさが変わると自動的にサイズ変更され、元のサイズより大きくならずに利用可能なスペースをすべて占めます。

基本的に私が欲しいのはこれです。 

.fit {
  max-width: 99%;
  max-height: 99%;
}
<img class="fit" src="pic.png">

上のコードの問題は、それが機能しないことです。picは、垂直スクロールバーを追加することによって、必要なすべての垂直スペースを取ってしまいます。

PHP、Javascript、JQueryは自由に使えますが、CSSだけのソリューションが欲しいです。IEで動かなくてもかまわない。

どのように解決するのですか？

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プラグインとして非常によく似た解決策をパッケージ化しています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します