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

Patricia Arquette
Lepaskan: 2024-10-29 22:50:03
asal
688 orang telah melayarinya

Can You Resize an Image to a Percentage of its Size Using Only 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>
Salin selepas log masuk

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!

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
Artikel terbaru oleh pengarang
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!