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

DDD
Lepaskan: 2024-10-30 21:45:02
asal
152 orang telah melayarinya

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>
Salin selepas log masuk

HTML:

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

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>
Salin selepas log masuk

HTML:

<code class="html"><div class="image-container"></div></code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!