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

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>

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


<style>
    * { padding: 0; margin: 0; }

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

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



<img  class="center fit lazy" src="/static/imghwm/default1.png" data-src="pic.jpg" alt="Bagaimana Membuat Imej Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa Bar Skrol?" >

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


</code>

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!