Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengubah Saiz Imej dengan Peratusan Menggunakan CSS Tanpa JavaScript?

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

DDD
DDDasal
2024-10-30 21:45:02145semak imbas

How to Resize Images by a Percentage Using CSS Without 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn