Bagaimana untuk Mengekalkan Nisbah Aspek dalam Auto-Saiz Semula Div?

Mengekalkan Nisbah Aspek dalam Elemen Div Mengubah Saiz Auto

Pernyataan Masalah

Buat div elemen yang:

• Melaraskan saiznya secara automatik agar sesuai dengan ruang skrin yang tersedia
• Mengekalkan nisbah aspek asalnya apabila diubah saiz
• Muat dalam dimensi lebar dan ketinggian yang ditentukan

Penyelesaian

Menggunakan sifat nisbah aspek, anda boleh mencapai tingkah laku yang diingini:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  background: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

Penjelasan

• nisbah aspek: var(--r): Mentakrifkan nisbah bidang yang diingini (960px : 540px)

• lebar: Mengira lebar berdasarkan yang lebih kecil daripada:

  • 90% daripada lebar tetingkap yang tersedia
  • 960px
  • 90% daripada ketinggian tetingkap didarab dengan aspek nisbah
• Latar Belakang Kecerunan Linear: Menunjukkan cara corak latar belakang mengekalkan nisbah aspeknya semasa mengubah saiz.

Penyelesaian ini membolehkan anda mencipta div yang mengubah saiz secara automatik, mengekalkan nisbah aspek asalnya, dalam dimensi maksimum yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek dalam Auto-Saiz Semula Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!