Atribut nisbah aspek CSS digunakan untuk menetapkan nisbah aspek elemen, seperti 16: 9 atau 4: 3, supaya pelayar secara automatik mengira ketinggian atau lebar berdasarkan perkadaran. Senario penggunaan biasa termasuk: 1. Pastikan bahagian bekas gambar untuk mengelakkan ubah bentuk; 2. Embedding video lebih stabil tanpa kemahiran padding; 3. Peratusan sel bersatu dalam susun atur grid. Nota termasuk: Selepas menetapkan lebar dan ketinggian, nisbah aspek mungkin gagal. Beri perhatian kepada keserasian penyemak imbas dan laraskan kesan paparan imej dengan objek yang sesuai.

Atribut aspect-ratio CSS membolehkan anda dengan mudah mengawal nisbah aspek elemen, mengelakkan penggunaan hack padding atau JS untuk melaksanakan susun atur responsif. Ia amat berguna dalam gambar, bekas video dan susun atur grid.

Apakah nisbah aspek?

Peranan aspect-ratio adalah untuk menetapkan nisbah aspek elemen, seperti 16: 9 atau 4: 3. Penyemak imbas secara automatik akan mengira ketinggian atau lebar berdasarkan skala ini, bergantung kepada sama ada anda telah menetapkan dimensi dalam salah satu arah.

Mari beri contoh yang paling mudah:

 .box {
  aspek nisbah: 16/9;
}

Dengan cara ini, tidak kira apa lebar .box , Ketinggiannya secara automatik akan diselaraskan kepada nisbah 16: 9.

Senario penggunaan biasa

Bekas gambar mengekalkan perkadaran

Apabila membuat laman web responsif, imej sering menyebabkan susun atur "ubah bentuk". Anda boleh menambah aspect-ratio ke bekas imej supaya ia sentiasa mengekalkan bahagian tetap.

 .Image-Container {
  aspek nisbah: 4/3;
  Limpahan: Tersembunyi;
}

.Image-Container IMG {
  Lebar: 100%;
  Ketinggian: 100%;
  Objek-Fit: Cover;
}

Dengan cara ini, bekas boleh diisi tanpa diregangkan tanpa mengira saiz asal gambar.

Penyembuhan video lebih stabil

Banyak laman web menggunakan teknik padding untuk mengekalkan perkadaran apabila membenamkan video. Sekarang anda boleh menggunakan aspect-ratio secara langsung untuk memudahkan kod.

 .video-pembungkus {
  aspek nisbah: 16/9;
}

Hanya letakkan <iframe> dalam html, dan anda tidak perlu menulis gaya tambahan untuk mengembangkan ketinggian.

Perkadaran sel seragam dalam susun atur grid

Dalam susun atur grid CSS, anda juga boleh menggunakannya dalam kombinasi dengan aspect-ratio jika anda mahu setiap item grid tetap menjadi perkadaran yang sama (seperti halaman galeri).

 .Grid-item {
  Aspek-nisbah: 1;
}

Dengan cara ini, setiap item grid adalah persegi dan tidak akan cacat kerana kandungan yang berbeza.

Nota dan keserasian

• Isu keutamaan : Jika anda menetapkan width dan height pada masa yang sama, aspect-ratio mungkin diabaikan. Ia akan berfungsi apabila hanya satu arah saiz yang ditetapkan.
• Sokongan penyemak imbas : Pelayar moden arus perdana telah disokong, termasuk Chrome, Edge, Firefox, dan Safari (bermula sekitar 2022). Jika anda perlu bersesuaian dengan versi lama IE, anda masih perlu menggunakan penyelesaian padding.
• Apa yang perlu saya lakukan jika nisbah konflik dengan gambar itu sendiri? Jika imej itu sendiri mempunyai nisbah aspek tetapi bekas induk mempunyai set aspect-ratio , tanaman atau ruang putih mungkin berlaku. Pada masa ini, ingatlah untuk menyesuaikan kesan paparan dengan object-fit atau object-position .

Pada dasarnya itu sahaja. aspect-ratio adalah harta yang sangat praktikal tetapi mudah diabaikan, terutamanya dalam reka bentuk responsif, yang dapat menjimatkan banyak masalah. Ia tidak rumit untuk digunakan, hanya perhatikan mekanisme kerja dan skop permohonannya.

Atas ialah kandungan terperinci Menggunakan harta aspek CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!