Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek dalam Auto-Saiz Semula Elemen Div Menggunakan CSS?

Memelihara Nisbah Aspek dalam Elemen Div Pengubah Saiz Auto

Elemen Div boleh mencabar untuk digayakan apabila ia perlu memuatkan saiz skrin yang berbeza-beza sambil mengekalkan nisbah aspek tertentu. Ini boleh dicapai menggunakan sifat CSS nisbah aspek di samping gabungan intuitif atribut lebar dan ketinggian.

Untuk mengendalikan kedua-dua perubahan lebar dan tinggi dengan anggun, anda boleh memanfaatkan pengiraan nisbah aspek --r = lebar / tinggi . Begini cara untuk melaksanakannya dalam CSS:

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: 
    linear-gradient(30deg, red 50%, transparent 50%),
    chocolate;
}

Dalam contoh ini:

• --r ialah pembolehubah CSS tersuai yang menyimpan nisbah bidang sebagai perpuluhan.
• Sifat nisbah aspek menetapkan nisbah bidang yang dikira.
• Sifat lebar mengira nilai minimum antara 90% daripada ruang yang tersedia, 960px dan 90% daripada ketinggian paparan didarab dengan nisbah bidang. Ini memastikan lebar kekal berkadar dengan ketinggian.
• Ketinggian ditentukan oleh sifat nisbah aspek bersamaan dengan lebar yang dikira.

Pendekatan sedemikian memastikan elemen div diubah saiz secara automatik sambil mengekalkan nisbah bidang yang diingini, menampung kedua-dua variasi lebar dan ketinggian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek dalam Auto-Saiz Semula Elemen Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!