歪みなくブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

歪みなくブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいですか?

Barbara Streisand

Nov 01, 2024 pm 03:51 PM

How Can I Resize an Image to Fit the Browser Window Without Distortion?

歪みなくブラウザウィンドウに合わせて画像のサイズを変更する

ブラウザウィンドウに合わせて画像のサイズを変更することは、一見簡単な解決策のように見える一般的なタスクです。ただし、比率を維持したりトリミングを回避したりするなど、特定の要件に従うと課題が生じる可能性があります。

スクロールバーと 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 までご連絡ください。