如何調整圖像大小以適合瀏覽器視窗而不變形？-css教學-PHP中文網

首頁

web前端

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 Grid 來確保圖像容器佔據整個視窗高度。然後將影像設定為在該容器內水平和垂直適合，保留其縱橫比並避免添加捲軸。

使用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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn