如何調整圖像大小以完美適合瀏覽器視窗
確保圖像無縫適合瀏覽器視窗可能會帶來挑戰,尤其是在未知的瀏覽器尺寸和圖像比例。然而,透過精心設計的方法可以實現此調整大小功能。
純CSS 解決方案(2018 年4 月更新)
對於支援現代CSS 的瀏覽器,純粹的CSS 解決方案CSS 解決方案可以如下實現:
<code class="html"><div class="imgbox"> <img class="center-fit" src="pic.png"> </div></code>
<code class="css">* { margin: 0; padding: 0; } .imgbox { display: grid; height: 100%; } .center-fit { max-width: 100%; max-height: 100vh; margin: auto; }</code>
此解決方案使用CSS 網格,動態調整圖像大小並使其在瀏覽器視窗中居中。
jQuery 解決方案
另一種方法是利用jQuery 將主體高度設定為等於視窗高度,從而使影像的max-height 屬性如預期運作:
<code class="html"><img class="center fit" src="pic.jpg"></code>
<code class="javascript">function set_body_height() { $('body').height($(window).height()); } $(document).ready(function() { $(window).bind('resize', set_body_height); set_body_height(); });</code>
<code class="css">* { padding: 0; margin: 0; } .fit { max-width: 100%; max-height: 100%; } .center { display: block; margin: auto; }</code>
這個解決方案包括設定主體高度以匹配視窗高度,允許影像隨著視窗尺寸的變化動態調整大小。
以上是如何使圖像完美適合瀏覽器視窗?的詳細內容。更多資訊請關注PHP中文網其他相關文章!