Cara - Rasio Aspek
Pelajari cara mempertahankan rasio aspek elemen dengan CSS.
Rasio Aspek
Buat elemen fleksibel yang mempertahankan rasio aspeknya (4:3, 16:9, dll.) saat diubah ukurannya:
Apa itu rasio aspek?
Rasio aspek suatu elemen menggambarkan hubungan proporsional antara lebar dan tingginya. Dua rasio aspek video yang umum adalah 4:3 (format video universal abad ke-20), dan 16:9 (universal untuk televisi HD dan televisi digital Eropa, dan default untuk video YouTube).
Cara - Tinggi Sama dengan Lebar
Langkah 1) Tambahkan HTML:
Gunakan elemen penampung, seperti <div>, dan jika Anda ingin teks di dalamnya, tambahkan elemen anak:
Contoh
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Langkah 2) Tambahkan CSS:
Tambahkan nilai persentase untuk padding-top
mempertahankan rasio aspek DIV. Contoh berikut akan membuat rasio aspek 1:1 (tinggi dan lebar selalu sama):
Contoh Rasio Aspek 1:1
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Rasio aspek lainnya:
Contoh Rasio Aspek 16:9
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Contoh 4:3 Rasio Aspek
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Contoh 3:2 Rasio Aspek
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Contoh 8:5 Rasio Aspek
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}