Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek dalam Elemen Div Boleh Diubah, Berpusat?

Mengekalkan Nisbah Aspek dalam Elemen Div Pengubah Saiz Auto

Apabila mencipta elemen div boleh ubah saiz yang kekal berpusat pada skrin, adalah penting untuk memastikan bahawa nisbah aspeknya dikekalkan, tanpa mengira perubahan dalam saiz tetingkap. Ini boleh dicapai menggunakan teknik CSS.

Penyelesaian CSS:

Sifat nisbah aspek menyediakan penyelesaian mudah untuk mengekalkan nisbah aspek dalam mengubah saiz elemen div. Kod CSS berikut menunjukkan cara untuk mencapai ini:

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

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

Penjelasan:

• Sifat nisbah aspek menetapkan nisbah aspek yang diingini untuk elemen, yang dikira berdasarkan nilai lebar dan ketinggian awal (960px dan 540px, masing-masing).

• Sifat lebar memastikan bahawa lebar elemen kekal dalam kekangan yang ditentukan:

  • Maksimum 90% daripada lebar yang tersedia
  • Maksimum 960px
  • Lebar yang mengekalkan nisbah bidang berhubung dengan ketinggian yang tersedia (90vh didarab dengan var(--r))
• Kecerunan latar belakang ditambah untuk menunjukkan secara visual bahawa nisbah bidang dikekalkan, kerana sudut kecerunan kekal malar tanpa mengira perubahan dalam elemen dimensi.

Hasil:

Kod CSS di atas menghasilkan elemen div yang kekal berpusat pada skrin, mengekalkan nisbah aspek yang dikehendaki dan mengubah saiz kepada sesuai dengan ruang tingkap yang ada. Penyelesaian ini berfungsi dengan berkesan untuk mengubah saiz kedua-dua lebar dan ketinggian elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek dalam Elemen Div Boleh Diubah, Berpusat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!