Di bawah ini kita akan mempelajari cara mempertahankan rasio aspek elemen dengan CSS.
Rasio aspek suatu elemen merupakan 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). Elemen fleksibel yang mempertahankan rasio aspeknya ada rasio 4: 3, 16: 9, dll. Di bawah ini ada contoh rasio aspek dengan rasio 1:1 :
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { background-color: yellow; position: relative; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */} .text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-size: 20px; color: Black; } </style> </head> <body> <h2> Pertahankan Rasio Aspek 1: 1 </h2> <p> Ubah ukuran jendela untuk melihat efeknya. </p> <div class="container"> <div class="text">1:1 Aspect ratio</div> </div> </body> </html>
Langkah 1) Tambahkan HTML:
Gunakan elemen kontainer, seperti <div> dan jika ingin teks ada di dalamnya, tambahkan child elemen :
Contoh
<div class="container"> <div class="text">Tulis sebuah Kalimat!</div> <!-- If you want text inside the container --> </div>
Langkah 2) Tambahkan CSS:
Tambahkan nilai persentase untuk padding-top
untuk mempertahankan rasio aspek DIV. Contoh berikut akan membuat rasio aspek 1: 1 (tinggi dan lebar selalu sama):
.container { background-color: red; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ position: relative; /* Jika ingin ada teks di dalamnya */} /* Jika ingin ada teks di dalam container */.text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
Contoh Rasio Aspek 16: 9
.container { padding-top: 56.25%; /* 16:9 Aspect Ratio (bagi 9 dengan 16 = 0,5625) */}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { background-color: blue; position: relative; width: 100%; padding-top: 56.25%; /* Aspect Ratio 16:9 */} .text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-size: 20px; color: white; } </style> </head> <body> <h2> Pertahankan Rasio Aspek 16: 9 </h2> <p> Ubah ukuran jendela untuk melihat efeknya. </p> <div class="container"> <div class="text">Aspect ratio 16:9 </div> </div> </body> </html>
Contoh Rasio Aspek 4: 3
.container { padding-top: 75%; /* 4:3 Aspect Ratio (bagi 3 dengan 4 = 0,75) */}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { background-color: Cyan; position: relative; width: 100%; padding-top: 75%; /* Aspect Ratio 4:3 */} .text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-size: 20px; color: Black; } </style> </head> <body> <h2> Pertahankan Rasio Aspek 4: 3 </h2> <p> Ubah ukuran jendela untuk melihat efeknya. </p> <div class = "container"> <div class = "text"> Rasio aspek 4: 3 </div> </div> </body> </html>
Contoh 3: 2 Rasio Aspek
.container { padding-top: 66.66%; /* 3:2 Aspect Ratio (bagi 2 dengan 3 = 0.6666) */}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { background-color: orange; position: relative; width: 100%; padding-top: 66.66%; /* Aspect Ratio 3:2 */} .text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-size: 20px; color: white; } </style> </head> <body> <h2> Pertahankan Rasio Aspek 3: 2 </h2> <p> Ubah ukuran jendela untuk melihat efeknya. </p> <div class = "container"> <div class = "text"> 3: 2 Rasio aspek </div> </div> </body> </html>
Contoh 8: 5 Rasio Aspek
.container { padding-top: 62.5%; /* 8:5 Aspect Ratio (bagi 5 dengan 8 = 0.625) */}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { background-color: Gray; position: relative; width: 100%; padding-top: 62.5%; /* Aspect Ratio 8:5 */} .text { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; font-size: 20px; color: white; } </style> </head> <body> <h2> Pertahankan Rasio Aspek 8: 5 </h2> <p> Ubah ukuran jendela untuk melihat efeknya. </p> <div class = "container"> <div class = "text"> Rasio aspek 8: 5 </div> </div> </body> </html>