如何動態調整影像大小以適合瀏覽器視窗
將影像封裝在瀏覽器視窗中,同時保持其寬高比,確保它完全顯示,並且防止滾動條通常會帶來挑戰。為了有效解決這些問題,這裡有兩種綜合方法。
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中文網其他相關文章!