Bagaimana untuk mempertahankan aspek rasio

Belajar bagaimana untuk menggunakan CSS untuk mempertahankan aspek rasio elemen.

Bagaimana mengimplementasikannya - Tinggi sama dengan lebar

Langkah pertama - Tambahkan HTML:

Menggunakan elemen kontainer, seperti <div>Jika Anda ingin ada teks di dalamnya, tambahkan elemen anak:

<div class="container">
  <div class="text">Some text</div> <!-- Jika Anda ingin ada teks di dalam kontainer -->
</div>

Langkah kedua - Tambahkan CSS:

untuk padding-top Menambahkan nilai persen untuk mempertahankan rasio lebar tinggi DIV. Contoh berikut akan menciptakan DIV dengan rasio lebar tinggi 1:1 (lebar dan tinggi selalu sama):

Contoh - Rasio lebar tinggi 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Rasio lebar tinggi 1:1 */
  position: relative; /* Jika Anda ingin ada teks di dalam */
}
/* Jika Anda ingin ada teks di dalam kontainer */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Coba sendiri

Rasio lebar tinggi lainnya

Contoh - Rasio lebar tinggi 16:9

.container {
  padding-top: 56.25%; /* Rasio lebar tinggi 16:9 (9 dibagi 16 sama dengan 0.5625) */
}

Coba sendiri

Contoh - Rasio lebar tinggi 4:3

.container {
  padding-top: 75%; /* Rasio lebar tinggi 4:3 (3 dibagi 4 sama dengan 0.75) */
}

Coba sendiri

Contoh - Rasio lebar tinggi 3:2

.container {
  padding-top: 66.66%; /* Rasio lebar tinggi 3:2 (2 dibagi 3 sama dengan 0.6666) */
}

Coba sendiri

Contoh - Rasio lebar tinggi 8:5

.container {
  padding-top: 62.5%; /* Rasio lebar tinggi 8:5 (5 dibagi 8 sama dengan 0.625) */
}

Coba sendiri

Properti aspect-ratio CSS

Dalam browser yang lebih baru, Anda dapat dengan mudah menggunakan CSS aspect-ratio Atribut:

Contoh - Rasio lebar tinggi 3:2

.container {
  aspect-ratio: 3 / 2;
}

Coba sendiri

Angka di tabel menunjukkan versi pertama browser yang mendukung sifat ini penuh.