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

如何使圖像完美適合沒有捲軸的瀏覽器視窗?

Patricia Arquette
發布: 2024-11-01 07:33:02
原創
739 人瀏覽過

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

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

調整圖像大小以適合瀏覽器視窗的範圍可以這是一個挑戰,特別是當需要考慮視窗大小、圖像尺寸和捲軸等各種因素時。

問題:

目標是保持影像的寬高比,防止捲軸出現,並確保影像佔據最大可用空間而不超過其原始大小。

僅CSS 解:

更新( 2018-04-11):

<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 解決方案:

<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
    * { padding: 0; margin: 0; }

    .fit { /* set relative picture size */
        max-width: 100%;
        max-height: 100%;
    }

    .center {
        display: block;
        margin: auto;
    }
</style>
</head>
<body>

<img class="center fit" src="pic.jpg" >

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }

    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html></code>
登入後複製

JQuery 解決方案涉及設定主體的高度以符合視窗高度。這使得影像的 max-height 屬性能夠按預期發揮作用,將影像限制在視窗的邊界內。此外,影像大小會在視窗大小調整時自動調整。

以上是如何使圖像完美適合沒有捲軸的瀏覽器視窗?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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