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

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

Barbara Streisand

リリース： 2024-11-01 15:51:55

オリジナル

990 人が閲覧しました

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