Bagaimana untuk Mengekalkan Nisbah Aspek Elemen dalam Pembolehubah Viewport: Panduan Mendalam untuk Harta `nisbah aspek`?

Memastikan Pengekalan Nisbah Aspek dalam Viewport

Dalam reka bentuk web, mengekalkan nisbah aspek elemen sambil menyesuaikan diri dengan dimensi viewport berubah adalah penting. Ini memastikan konsistensi merentas saiz dan orientasi skrin yang berbeza. Untuk mencapai pemeliharaan ini secara khusus apabila berurusan dengan elemen segi empat sama, pendekatan CSS berikut boleh dilaksanakan:

Menggunakan Harta nisbah aspek

Sehingga 2022, aspek -harta nisbah menawarkan penyelesaian yang teguh untuk mengawal nisbah aspek unsur. Dengan menentukan nisbah lebar-ke-tinggi yang dikehendaki, sifat ini menyesuaikan saiz elemen untuk mengekalkan nisbah yang ditentukan. Yang penting, penyesuaian saiz dikekang oleh dimensi terkecil port pandang, memenuhi keperluan pelarasan secara dinamik pada kedua-dua orientasi landskap dan potret.

Contoh Pelaksanaan

Untuk menunjukkan kefungsian sifat nisbah aspek, kod berikut boleh digunakan:

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

<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>

Dalam contoh ini, dua div dengan nisbah bidang yang berbeza (1:1 dan 16:9) dicipta. Sifat nisbah aspek memastikan bahawa tanpa mengira orientasi peranti, div ini mengekalkan bentuk dan saiz yang diingini dalam port pandang. Selain itu, dimensinya dilaraskan agar sesuai dengan dimensi terkecil port pandangan, memastikan bentuk segi empat sama dikekalkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Elemen dalam Pembolehubah Viewport: Panduan Mendalam untuk Harta `nisbah aspek`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!