Di bawah ini kita akan mempelajari cara mempertahankan rasio aspek elemen dengan CSS.
Rasio Aspek
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>
Mebuat Tinggi Sama dengan Lebar
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;
}Rasio aspek lainnya:
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>
