Bagaimana Membuat Imej Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa Bar Skrol?-tutorial css-php.cn

Bagaimana Membuat Imej Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa Bar Skrol?

Patricia Arquette

Lepaskan： 2024-11-01 07:33:02

asal

782 orang telah melayarinya

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

Cara Mengubah Saiz Imej agar Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas

Mengubah saiz imej agar muat dalam lingkungan tetingkap penyemak imbas boleh menimbulkan cabaran, terutamanya apabila pelbagai faktor seperti saiz tetingkap, dimensi imej dan bar skrol perlu dipertimbangkan.

Isu:

Matlamatnya adalah untuk mengekalkan imej nisbah aspek, menghalang penampilan bar skrol dan pastikan imej menempati ruang maksimum yang tersedia tanpa melebihi saiz asalnya.

Penyelesaian CSS Sahaja:

Kemas kini ( 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>

Salin selepas log masuk

Kod ini mencapai hasil yang diingini semata-mata melalui CSS. Imej berada dalam bekas yang dipaparkan grid yang menduduki ketinggian penuh tetingkap. Imej itu sendiri menyesuaikan kedua-dua lebar dan tingginya agar muat dalam bekas ini, mengekalkan nisbah bidang sambil memastikan ia berada di tengah dalam tetingkap.

Penyelesaian 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>

Salin selepas log masuk

Penyelesaian JQuery melibatkan penetapan ketinggian badan agar sepadan dengan ketinggian tetingkap. Ini membolehkan sifat ketinggian maksimum imej berfungsi seperti yang dimaksudkan, mengehadkan imej dalam sempadan tetingkap. Selain itu, imej diubah saiz secara automatik apabila saiz semula tetingkap.

Atas ialah kandungan terperinci Bagaimana Membuat Imej Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa Bar Skrol?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!