Bagaimanakah CSS Boleh Memastikan Saiz Imej Seragam untuk Imej Berbeza Dimensi?

Mencapai Saiz Imej yang Seragam untuk Mempelbagaikan Imej dengan CSS

Mencipta galeri imej yang menarik selalunya memerlukan imej dengan saiz yang konsisten, tanpa mengira dimensi asalnya . Ini boleh menimbulkan cabaran apabila bekerja dengan imej dengan ketinggian dan lebar yang berbeza. Walau bagaimanapun, CSS menawarkan penyelesaian untuk menjadikan semua imej kelihatan seragam.

Penyelesaian:

Untuk menetapkan dimensi semua imej kepada 100px kali 100px, gunakan CSS berikut kod:

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

Pelaksanaan:

1. Sifat Terapung: Ini menjajarkan imej secara mendatar dan memastikan ia kelihatan bersebelahan, mencipta susunan sebaris.
2. Lebar dan Tinggi Sifat: Tetapkan lebar dan tinggi secara eksplisit kepada nilai tetap, dalam kes ini, 100px untuk kedua-duanya.
3. Sifat muat objek: Memastikan keseluruhan imej kelihatan dalam yang ditentukan dimensi. Ia menskala dan memangkas imej dengan sewajarnya sambil mengekalkan nisbah bidangnya.

Contoh:

Untuk menggambarkan konsep ini, pertimbangkan kod HTML dan CSS berikut:

<img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Bagaimanakah CSS Boleh Memastikan Saiz Imej Seragam untuk Imej Berbeza Dimensi?" >
<img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Bagaimanakah CSS Boleh Memastikan Saiz Imej Seragam untuk Imej Berbeza Dimensi?" >
<img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Bagaimanakah CSS Boleh Memastikan Saiz Imej Seragam untuk Imej Berbeza Dimensi?" >

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

Kod ini akan menjadikan imej sebagai lakaran kecil segi empat sama dengan ketinggian yang konsisten dan lebar 100px. Imej akan diubah saiz dan dipangkas agar muat dalam dimensi ini sambil mengekalkan perkadaran asalnya.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Memastikan Saiz Imej Seragam untuk Imej Berbeza Dimensi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!