如何使圖像適合瀏覽器視窗？-css教學-PHP中文網

如何使圖像適合瀏覽器視窗？

DDD

發布： 2024-10-30 06:29:27

原創

513 人瀏覽過

How to Make an Image Fit the Browser Window?

如何讓影像適合瀏覽器視窗：綜合指南

在Web 開發領域，在瀏覽器中無縫顯示影像視窗帶來了獨特的挑戰。確定圖像的適當大小以適應瀏覽器視窗和圖像尺寸仍然是一個常見的難題。本文深入探討了調整圖像大小以有效適應瀏覽器視窗的複雜性，全面解決了所涉及的複雜問題。

圖片大小調整的目標

實現和諧整合將圖片加入網頁版面中，我們必須滿足以下條件：

瀏覽器視窗的尺寸通常未知，不應驅動影像尺寸。
影像的未知原始尺寸不應妨礙調整大小過程。
影像應保持其縱橫比，保留其原始比例。
影像應完全顯示在視窗內，沒有裁切或扭曲。
捲軸是不可取的，如果影像適合窗口，則不應出現捲軸。
影像應動態響應視窗尺寸的變化，填充可用空間而不超過其原始大小。

純CSS 解決方案

對於那些尋求純CSS 解決方案的人來說，以下程式碼可以根據瀏覽器視窗尺寸優雅地將影像居中並調整其大小：

<code class="html"><html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html></code>

登入後複製

基於jQuery 的解決方案

或者，這個jQuery 驅動的解決方案可確保圖像容器（在本例中為主體）的高度等於瀏覽器視窗的高度，從而允許圖像的最大高度-按預期功能的高度：

<code class="html"><!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit {
            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" language="JavaScript">
    function set_body_height() {
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html></code>

登入後複製

以上是如何使圖像適合瀏覽器視窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！