Bagaimana untuk Membuat Imej Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas?

Cara Mengubah Saiz Imej agar Sesuai dengan Tetingkap Penyemak Imbas Sempurna

Memastikan imej muat dengan lancar dalam tetingkap penyemak imbas boleh menimbulkan cabaran, terutamanya dengan dimensi pelayar yang tidak diketahui dan perkadaran imej. Walau bagaimanapun, mencapai fungsi mengubah saiz ini boleh dilakukan dengan pendekatan yang direka dengan baik.

Penyelesaian CSS Sahaja (Dikemas kini April 2018)

Untuk penyemak imbas yang menyokong CSS moden, semata-mata Penyelesaian CSS boleh dilaksanakan seperti berikut:

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

Penyelesaian ini menggunakan grid CSS dan mengubah saiz dan memusatkan imej secara dinamik dalam tetingkap penyemak imbas.

Penyelesaian jQuery

Pendekatan lain menggunakan jQuery untuk menetapkan ketinggian badan sama dengan ketinggian tetingkap, membenarkan sifat ketinggian maksimum imej berfungsi seperti yang diharapkan:

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

Ini penyelesaian melibatkan menetapkan ketinggian badan agar sepadan dengan ketinggian tetingkap, membenarkan imej mengubah saiz secara dinamik apabila dimensi tetingkap berubah.

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