Bolehkah Anda Mengubah Saiz Imej kepada Peratusan Saiznya Hanya Menggunakan CSS?

Mengubah Saiz Imej kepada Peratusan Sendiri Secara Eksklusif dengan CSS

Dalam bidang reka bentuk web, keperluan untuk mengubah saiz imej kepada dimensi tertentu timbul dengan kerap. Satu senario melibatkan mengurangkan saiz imej kepada peratusan saiz asalnya, tanpa mengubah saiz elemen bekasnya. Walaupun JavaScript atau skrip sebelah pelayan menawarkan penyelesaian, artikel ini meneroka alternatif CSS sahaja yang berpotensi.

Adakah Kemungkinan untuk Mengubah Saiz Imej Menggunakan Peratusan CSS?

Pada masa ini , tiada sifat CSS langsung yang membenarkan saiz semula imej berdasarkan saiznya sendiri. Walau bagaimanapun, terdapat dua kaedah bijak yang boleh mencapai kesan ini:

Kaedah 1: Saiz Semula Visual dengan Transformasi

Kaedah ini mengurangkan saiz imej secara visual tanpa menjejaskan imejnya. dimensi sebenar. Teknik ini menggunakan sifat 'transform: scale()' untuk mengecilkan imej dengan peratusan tertentu. Imej kekal di tengah dalam dimensi asalnya.

Contoh:

<code class="css">img {
  transform: scale(0.5);
}</code>

Atas ialah kandungan terperinci Bolehkah Anda Mengubah Saiz Imej kepada Peratusan Saiznya Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!