Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Berdasarkan Lebar dan Tinggi?

Mengekalkan Nisbah Aspek Mengikut Lebar dan Tinggi

Apabila berusaha untuk meletakkan div segi empat sama berpusat di dalam port pandangan, persoalan timbul: bagaimanakah seseorang boleh mengekalkan nisbah aspeknya dengan berkesan sambil mempertimbangkan kedua-dua dimensi lebar dan tinggi?

Kemunculan sifat nisbah aspek CSS pada tahun 2022 menawarkan penyelesaian yang komprehensif untuk cabaran ini. Sifat ini memberi kuasa kepada pembangun untuk mengekalkan sebarang nisbah bidang berbanding dengan saiz port pandangan atau elemen induk.

Untuk mencapai objektif kami mengekalkan nisbah bidang berdasarkan dimensi port pandangan, kod CSS berikut boleh digunakan:

<code class="css">.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}</code>

Coretan kod ini menunjukkan dua nisbah bidang: 1:1 dan 1:19, masing-masing. Elemen div yang menggunakan nisbah bidang ini akan melaraskan dimensinya secara automatik untuk mengekalkan nisbah ini dalam port pandangan, memastikan penampilan visual yang konsisten tanpa mengira saiz atau orientasi port pandangan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Berdasarkan Lebar dan Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!