Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengubah Saiz Imej Secara Dinamik agar Sesuai dengan Tetingkap Penyemak Imbas?

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

Linda Hamiltonasal: 2024-10-31 01:17:29611semak imbas

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>

CSS:

<code class="css">    * {
        margin: 0;
        padding: 0;
    }
    .imgbox {
        display: grid;
        height: 100%;
    }
    .center-fit {
        max-width: 100%;
        max-height: 100vh;
        margin: auto;
    }</code>

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>

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

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!

JavaScript jquery css while auto Property function this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bila hendak menggunakan `height: 100%` lwn. `min-height: 100%` dalam CSS?Artikel seterusnya：Bila hendak menggunakan `height: 100%` lwn. `min-height: 100%` dalam CSS?

Artikel berkaitan

Lihat lagi