Bagaimana untuk Mengubah Saiz Imej dengan Peratusan Menggunakan CSS Tanpa JavaScript?

Mengubah Saiz Imej kepada Peratusan Diri Sendiri dalam CSS

Soalan:

Bagaimana anda boleh mengurangkan dimensi imej dengan peratusan menggunakan CSS, tanpa menggunakan JavaScript atau penyelesaian sebelah pelayan, dalam senario di mana saiz imej asal tidak diketahui?

Jawapan:

Kaedah 1 (Saiz Visual):

Pendekatan ini menskalakan imej secara visual sahaja, mengekalkan dimensi asalnya dalam DOM. Walau bagaimanapun, imej yang diubah saiz dipusatkan dalam bekas asal.

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

HTML:

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

Kaedah 2 (Saiz Latar Belakang Berasaskan Peratusan) :

Sebagai alternatif, anda boleh menggunakan saiz latar belakang berasaskan peratusan pada elemen DIV yang mengandungi imej.

<code class="css">.image-container {
  width: 100%;
  height: 100%;
  background-image: url("image.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
}</code>

HTML:

<code class="html"><div class="image-container"></div></code>

Nota:

Sementara Kaedah 1 mencapai hasil saiz semula yang diingini untuk satu imej, Kaedah 2 boleh digunakan untuk mengubah saiz berbilang imej secara konsisten dalam bekas.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Imej dengan Peratusan Menggunakan CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!