Berikut ialah beberapa tajuk yang berpotensi untuk artikel anda, memfokuskan pada format soal jawab: * Bolehkah saya Mencipta Div Square Bersaiz Dinamik yang Mengekalkan Nisbah Aspek dan Pusat dalam Viewport? *

Mengekalkan Nisbah Aspek mengikut Lebar dan Ketinggian

Bolehkah div segi empat tepat padan dan tengah secara dinamik dalam port pandang sambil mengekalkan nisbah bidangnya berdasarkan kedua-dua lebar dan tinggi ?

Keperluan:

• Penyelesaian CSS sahaja
• Saiz segi empat sama secara automatik melaraskan kepada viewport dimensi minimum.
• Segi empat sama berpusat secara mendatar dan menegak.

Penyelesaian:

Harta nisbah aspek (2022 )

Untuk mencapai matlamat kami, gunakan sifat nisbah aspek (rujukan MDN). Alat yang luar biasa ini membolehkan kami menentukan nisbah lebar kepada ketinggian, memastikan aspek yang diingini dikekalkan.

Mengekalkan Nisbah Aspek Berdasarkan Saiz Port Pandangan (Lebar dan Tinggi):

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

/* For the demo */

body {
  margin: 0;
}</code>

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

Dalam contoh ini:

• Div dengan kelas ar-1-1 mengekalkan nisbah bidang 1:1.
• Div dengan kelas ar-1- 19 mengekalkan nisbah bidang 16:9.
• Semua div melaraskan saiznya secara dinamik berdasarkan dimensi port pandangan, memastikan pemusatan yang betul.

Atas ialah kandungan terperinci Berikut ialah beberapa tajuk yang berpotensi untuk artikel anda, memfokuskan pada format soal jawab: * Bolehkah saya Mencipta Div Square Bersaiz Dinamik yang Mengekalkan Nisbah Aspek dan Pusat dalam Viewport? *. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!