画像をブラウザウィンドウに合わせるにはどうすればよいですか?-CSSチュートリアル-php.cn

画像をブラウザウィンドウに合わせるにはどうすればよいですか?

DDD

リリース： 2024-10-30 06:29:27

オリジナル

523 人が閲覧しました

How to Make an Image Fit the Browser Window?

画像をブラウザウィンドウに合わせる方法: 総合ガイド

Web 開発の分野では、ブラウザ内で画像をシームレスに表示しますwindow は独特の課題をもたらします。ブラウザウィンドウと画像のサイズの両方に適合する画像の適切なサイズを決定することは、依然として一般的なジレンマです。この記事では、ブラウザウィンドウに効果的にフィットするように画像のサイズを変更する複雑さを掘り下げ、関連する複雑な問題に包括的に対処します。

画像のサイズ変更の目的

調和のとれた統合を達成するにはWeb レイアウトに画像を追加するには、次の基準を満たす必要があります。

ブラウザウィンドウの寸法は不明な場合が多いため、画像サイズを決定するものであってはなりません。
画像の元の寸法が不明であるサイズ変更プロセスを妨げないようにしてください。
画像は元の縦横比を維持し、縦横比を維持する必要があります。
画像は、トリミングや歪みを生じることなく、ウィンドウ内に完全に表示される必要があります。
スクロールバーは望ましくなく、画像がウィンドウに収まる場合には表示すべきではありません。
画像はウィンドウの寸法の変化に動的に応答し、元のサイズを超えずに使用可能なスペースを埋める必要があります。

CSS のみのソリューション

純粋な CSS ソリューションを求める人のために、次のコードはブラウザウィンドウの寸法に基づいて画像を適切に中央揃えにし、サイズ変更します。

<code class="html"><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></code>

ログイン後にコピー

jQuery ベースのソリューション

あるいは、この jQuery ベースのソリューションでは、画像コンテナー (この場合は本体) の高さがブラウザーウィンドウの高さと同じになり、画像の最大サイズが許可されます。 - 意図したとおりに機能する高さ:

<code class="html"><!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit {
            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() {
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html></code>

ログイン後にコピー

以上が画像をブラウザウィンドウに合わせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。