Bagaimanakah Saya Boleh Jadikan Semua Imej Saya Saiz Sama Menggunakan CSS?

Menyatukan Dimensi Imej dalam CSS

Menggayakan imej untuk mengekalkan dimensi yang konsisten boleh menjadi penting untuk mencipta visual seragam dan reka letak responsif. Dalam keadaan ini, di mana anda ingin menyamakan imej dengan ketinggian dan lebar yang berbeza-beza, CSS menawarkan penyelesaian yang mudah.

Object-Fit: An Effective Solution

Objek- fit property menyediakan mekanisme yang berkuasa untuk mengubah saiz dan mengekalkan nisbah aspek imej dalam bekas yang ditetapkan. Dengan menetapkan kesesuaian objek kepada penutup, anda boleh memanipulasi imej untuk mengisi bekasnya sepenuhnya, memastikan ia berskala secara berkadar sambil menghormati aspek yang wujud.

Pelaksanaan CSS

Untuk mencapai hasil yang anda inginkan, anda boleh melaksanakan perkara berikut CSS:

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

Penggunaan

Dengan menggunakan CSS ini pada imej pada halaman anda, anda boleh mengubah saiz dan menjajarkannya dengan mudah untuk mencipta dinding imej yang padu. Terapung: kiri; harta memastikan bahawa imej disusun secara mendatar, manakala nilai lebar dan ketinggian yang ditentukan menentukan dimensi seragam yang anda inginkan.

Nota tentang Sokongan Penyemak Imbas

Sila ambil perhatian bahawa padanan objek tidak disokong dalam pelayar lama seperti Internet Explorer 11. Untuk keserasian yang lebih luas, anda boleh memilih teknik alternatif seperti menggunakan imej latar belakang dengan saiz CSS atau bergantung pada penyelesaian manipulasi imej berasaskan JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Jadikan Semua Imej Saya Saiz Sama Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!