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

首頁

web前端

css教學

如何動態調整圖像大小以適合瀏覽器視窗？

Linda Hamilton

Oct 31, 2024 am 01:17 AM

How to Dynamically Resize an Image to Fit the Browser Window?

如何動態調整影像大小以適合瀏覽器視窗

將影像封裝在瀏覽器視窗中，同時保持其寬高比，確保它完全顯示，並且防止滾動條通常會帶來挑戰。為了有效解決這些問題，這裡有兩種綜合方法。

1.僅CSS 解決方案（2018 更新）

利用CSS 的網格佈局和自動邊距功能，此方法提供了全面的僅CSS 解決方案。下面的程式碼片段動態居中並調整圖片大小以適合瀏覽器視窗：

<code class="html"><div class="imgbox">
  <img class="center-fit" src="pic.png">
</div></code>

登入後複製

CSS:

<code class="css">    * {
        margin: 0;
        padding: 0;
    }
    .imgbox {
        display: grid;
        height: 100%;
    }
    .center-fit {
        max-width: 100%;
        max-height: 100vh;
        margin: auto;
    }</code>

登入後複製

2. JavaScript/jQuery解決方案

此方法依賴jQuery 動態設定影像容器的高度，從而允許影像上的max-height 屬性如預期運作。當瀏覽器視窗大小調整時，影像會自動調整其大小。

<code class="html"><body>
  <img class="center fit" src="pic.jpg">
</body></code>

登入後複製

<code class="javascript">    // Set body height to window height
    function set_body_height() {
        $('body').height($(window).height());
    }
    // On DOM ready and window resize, adjust body height
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });</code>

登入後複製

注意：使用者 gutierrezalex 建立的 jQuery 外掛提供了類似的解決方案。

以上是如何動態調整圖像大小以適合瀏覽器視窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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