スクロールバーなしで画像をブラウザウィンドウに完璧にフィットさせるにはどうすればよいですか?-CSSチュートリアル-php.cn

スクロールバーなしで画像をブラウザウィンドウに完璧にフィットさせるにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-01 07:33:02

オリジナル

681 人が閲覧しました

How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?

ブラウザウィンドウにぴったり収まるように画像のサイズを変更する方法

ブラウザウィンドウの範囲内に収まるように画像のサイズを変更すると、問題が生じる可能性がありますこれは、特にウィンドウサイズ、画像のサイズ、スクロールバーなどのさまざまな要素を考慮する必要がある場合に、課題となります。

問題:

目標は、画像のサイズを維持することです。アスペクト比を調整し、スクロールバーの表示を防ぎ、画像が元のサイズを超えずに最大の利用可能なスペースを占めるようにします。

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 サイトの他の関連記事を参照してください。