Bagaimana untuk melaksanakan saiz imej penyesuaian menggunakan unit CSS Viewport vmin dan vw

Cara melaksanakan saiz imej adaptif menggunakan unit CSS Viewport vmin dan vw

Dalam reka bentuk web, kita sering menghadapi situasi di mana imej perlu disesuaikan dengan saiz skrin. Untuk mencapai matlamat ini, CSS menyediakan unit berkuasa - unit port pandang. di mana vmin mewakili peratusan yang lebih kecil daripada lebar viewport dan vw mewakili peratusan lebar viewport.

Jadi, kita boleh menggunakan kedua-dua unit ini untuk mencapai kesan saiz imej adaptif. Kaedah pelaksanaan khusus akan diperkenalkan di bawah, serta contoh kod yang sepadan.

1. Gunakan vmin untuk menetapkan lebar dan tinggi imej

Pertama, kita perlu memberikan imej nisbah aspek tetap, dan kemudian gunakan unit vmin untuk menetapkan lebar dan ketinggian imej. Berikut ialah contoh mudah:

<style>
    .image-container {
        width: 90vmin;
        height: 90vmin;
        max-width: 90vw;
        max-height: 90vw;
    }

    .responsive-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="image-container">
    <img src="example.jpg" alt="Example Image" class="responsive-image">
</div>

Dalam kod di atas, .image-container ialah div yang membalut imej Lebar dan ketinggian masing-masing ditetapkan kepada 90vmin dalam gaya, yang memastikan nisbah aspek imej kekal tidak berubah. . .responsive-image ialah kelas imej Dengan menetapkan lebar dan tinggi kepada 100%, imej memenuhi keseluruhan bekas. Atribut object-fit: cover; membenarkan imej mengisi keseluruhan bekas tanpa ubah bentuk.

2. Gunakan vw untuk menetapkan lebar imej

Kaedah lain ialah menggunakan unit vw untuk menetapkan secara langsung lebar imej, tetapi perlu diingat bahawa kaedah ini boleh menyebabkan nisbah aspek imej menjadi tidak seimbang. Berikut ialah kod sampel:

<style>
    .responsive-image {
        width: 90vw;
        max-width: 100%;
        height: auto;
    }
</style>

<img src="example.jpg" alt="Example Image" class="responsive-image">

Dalam kod di atas, kelas .responsive-image secara langsung menetapkan lebar kepada 90vw, dan atribut max-width: 100% boleh memastikan bahawa imej tidak akan melebihi viewport pada kecil. skrin. ketinggian: auto membenarkan ketinggian imej melaraskan secara automatik mengikut perubahan lebar, mengekalkan nisbah aspek asal.

Ringkasan

Di atas adalah kaedah untuk melaksanakan saiz imej adaptif menggunakan unit CSS Viewport vmin dan vw. Dengan menggunakan kedua-dua unit ini secara rasional, kami boleh membuat imej secara automatik menyesuaikan diri dengan saiz yang berbeza pada skrin yang berbeza, meningkatkan pengalaman pengguna halaman web. Jika anda menggunakan kaedah ini, sila laraskannya mengikut situasi sebenar dan perhatikan keserasian. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan saiz imej penyesuaian menggunakan unit CSS Viewport vmin dan vw. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!