Bagaimana untuk Mengalih Keluar Ruang Putih Di Sekitar Elemen CSS Berskala?

Menyelesaikan Ruang Putih Di Sekitar Elemen CSS Berskala

Apabila menggunakan transformasi skala pada elemen CSS, ia boleh menyebabkan ruang putih muncul di sekeliling elemen berskala. Ini kerana penskalaan mempengaruhi saiz yang diberikan elemen, tetapi bukan saiz fizikalnya, menjadikan ruang sekeliling kosong.

Memahami Masalah

Transformasi CSS, seperti skala , alihkan kandungan yang diberikan elemen, termasuk latar belakang dan elemen anak, sebagai satu unit sambil meninggalkan elemen sekeliling dalam kedudukan asalnya. Ini menghasilkan ruang kosong di sekeliling elemen berskala.

Penyelesaian

Untuk mengalih keluar ruang putih, anda perlu melaraskan saiz elemen yang dipaparkan supaya sepadan dengan saiz berskalanya. Ini boleh dicapai menggunakan sifat CSS seperti lebar dan tinggi. Begini cara anda boleh melakukannya:

Penyelesaian CSS:

<code class="css">.quarter.scale-thumb {
  width: 60%; // Adjusted width to match scaled size
  height: 60%; // Adjusted height to match scaled size
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}</code>

Penyelesaian JavaScript:
Sebagai alternatif, anda boleh menggunakan JavaScript untuk laraskan saiz elemen secara manual selepas menggunakan penjelmaan:

<code class="javascript">document.querySelector('.quarter.scale-thumb').style.width = '60%';
document.querySelector('.quarter.scale-thumb').style.height = '60%';</code>

Dengan melaraskan lebar dan ketinggian elemen berskala, anda boleh menghapuskan ruang putih tambahan dan memastikan kandungan berskala sesuai dengan ruang yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengalih Keluar Ruang Putih Di Sekitar Elemen CSS Berskala?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!