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

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

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

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

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

<code class="html"><div class="imgbox">
  <img  class="center-fit lazy" src="/static/imghwm/default1.png" data-src="pic.png" alt="如何動態調整圖像大小以適合瀏覽器視窗？" >
</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">
  <img  class="center fit lazy" src="/static/imghwm/default1.png" data-src="pic.jpg" alt="如何動態調整圖像大小以適合瀏覽器視窗？" >
</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中文網其他相關文章！