首頁 > web前端 > css教學 > 主體

如何使圖像完美適合瀏覽器視窗?

Barbara Streisand
發布: 2024-10-31 07:24:30
原創
724 人瀏覽過

How to Make an Image Fit Perfectly in a Browser Window?

如何調整圖像大小以完美適合瀏覽器視窗

確保圖像無縫適合瀏覽器視窗可能會帶來挑戰,尤其是在未知的瀏覽器尺寸和圖像比例。然而,透過精心設計的方法可以實現此調整大小功能。

純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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板