Bagaimana untuk Mengubah Saiz Imej Secara Dinamik agar Sesuai dengan Tetingkap Penyemak Imbas?-tutorial css-php.cn

Bagaimana untuk Mengubah Saiz Imej Secara Dinamik agar Sesuai dengan Tetingkap Penyemak Imbas?

Linda Hamilton

Lepaskan： 2024-10-31 01:17:29

asal

610 orang telah melayarinya

How to Dynamically Resize an Image to Fit the Browser Window?

Cara Mengubah Saiz Imej Secara Dinamik agar Sesuai dalam Tetingkap Penyemak Imbas

Menyisipkan imej dalam tetingkap penyemak imbas sambil mengekalkan nisbah aspeknya, memastikan ia dipaparkan sepenuhnya, dan menghalang bar skrol sering menimbulkan cabaran. Untuk menangani isu ini dengan berkesan, berikut ialah dua pendekatan komprehensif.

1. Penyelesaian CSS Sahaja (Kemas Kini 2018)

Memanfaatkan reka letak grid CSS dan keupayaan jidar automatik, kaedah ini menawarkan penyelesaian komprehensif CSS sahaja. Coretan kod di bawah secara dinamik memusatkan dan mengubah saiz imej agar sesuai dengan tetingkap penyemak imbas:

<code class="html"><div class="imgbox">
  <img class="center-fit" src="pic.png">
</div></code>

Salin selepas log masuk

CSS:

<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

2. Penyelesaian JavaScript/jQuery

Pendekatan ini bergantung pada jQuery untuk menetapkan ketinggian bekas imej secara dinamik, membenarkan sifat ketinggian maksimum pada imej berfungsi seperti yang dimaksudkan. Imej melaraskan saiznya secara automatik apabila tetingkap penyemak imbas diubah saiznya.

<code class="html"><body>
  <img class="center fit" src="pic.jpg">
</body></code>

Salin selepas log masuk

<code class="javascript">    // Set body height to window height
    function set_body_height() {
        $('body').height($(window).height());
    }
    // On DOM ready and window resize, adjust body height
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });</code>

Salin selepas log masuk

Nota: Penyelesaian serupa tersedia sebagai pemalam jQuery yang dicipta oleh pengguna gutierrezalex.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Imej Secara Dinamik agar Sesuai dengan Tetingkap Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!