Properti CSS baru yang membantu menjaga spasi dalam tata letak responsif.
Rasio aspek
Rasio lebar tinggi biasanya dinyatakan sebagai dua bilangan bulat dan titik dua dalam dimensi: lebar:tinggi, atau x:y. Rasio aspek yang paling umum untuk fotografi adalah 4:3 dan 3:2, sedangkan video, dan kamera konsumen baru, cenderung memiliki rasio aspek 16:9.
Dengan hadirnya desain responsif, mempertahankan rasio aspek menjadi semakin penting bagi developer web, terutama karena dimensi gambar berbeda dan ukuran elemen berubah berdasarkan ruang yang tersedia.
Beberapa contoh pentingnya mempertahankan rasio aspek adalah:
- Membuat iframe responsif, yang berukuran 100% dari lebar induk, dan tingginya harus tetap memiliki rasio area pandang tertentu
- Membuat penampung placeholder intrinsik untuk gambar, video, dan sematan untuk mencegah penataan ulang saat item dimuat dan menggunakan ruang
- Membuat ruang responsif yang seragam untuk visualisasi data interaktif atau animasi SVG
- Membuat ruang responsif yang seragam untuk komponen multi-elemen seperti kartu atau tanggal kalender
- Membuat ruang responsif yang seragam untuk beberapa gambar dengan berbagai dimensi (dapat digunakan bersama
object-fit)
Paskan objek
Mendefinisikan rasio aspek membantu kita menentukan ukuran media dalam konteks responsif. Alat lain di bucket ini adalah properti object-fit, yang memungkinkan pengguna menjelaskan bagaimana objek (seperti gambar) dalam blok harus mengisi blok tersebut:
object-fit. Lihat demo di Codepen.Nilai initial dan fill menyesuaikan ulang gambar untuk mengisi ruang. Dalam contoh kita, hal ini menyebabkan
gambar menjadi kusut dan buram, saat menyesuaikan kembali piksel. Tidak ideal. object-fit: cover menggunakan
dimensi terkecil gambar untuk mengisi ruang dan memangkas gambar agar sesuai dengannya berdasarkan
dimensi ini. Pola ini "memperbesar" pada batas terendahnya. object-fit: contain memastikan bahwa seluruh gambar
selalu terlihat, dan kebalikan dari cover, yang mengambil ukuran batas terbesar
(dalam contoh kita di atas, ini adalah lebar), dan mengubah ukuran gambar untuk mempertahankan rasio aspek intrinsiknya
saat menyesuaikan dengan ruang. Kasus object-fit: none menunjukkan gambar yang dipangkas di tengahnya
(posisi objek default) sesuai ukuran alaminya.
object-fit: cover cenderung berfungsi pada sebagian besar situasi untuk memastikan antarmuka seragam yang bagus saat menangani
gambar dari berbagai dimensi, tetapi Anda kehilangan informasi dengan cara ini (gambar dipangkas pada
tepi terpanjangnya).
Jika detail ini penting (misalnya, saat mengerjakan produk kecantikan dengan tampilan datar), memangkas konten penting tidak dapat diterima. Jadi skenario yang ideal adalah gambar responsif dengan berbagai ukuran yang sesuai dengan ruang UI tanpa pemangkasan.
Tips lama: mempertahankan rasio aspek dengan padding-top
padding-top untuk menetapkan rasio aspek 1:1 pada gambar pratinjau postingan dalam carousel.Untuk membuatnya lebih responsif, kita dapat menggunakan rasio aspek. Hal ini memungkinkan kita untuk menetapkan ukuran rasio tertentu dan mendasarkan sisa media pada sumbu individual (tinggi atau lebar).
Solusi lintas browser yang saat ini diterima dengan baik untuk mempertahankan rasio aspek berdasarkan lebar
gambar dikenal sebagai "Padding-Top Hack". Solusi ini memerlukan penampung induk dan
penampung turunan yang ditempatkan benar-benar. Salah satunya akan menghitung rasio aspek sebagai persentase untuk ditetapkan
sebagai padding-top. Contoh:
- Rasio aspek 1:1 = 1 / 1 = 1 =
padding-top: 100% - Rasio aspek 4:3 = 3 / 4 = 0,75 =
padding-top: 75% - Rasio aspek 3:2 = 2 / 3 = 0,66666 =
padding-top: 66.67% - Rasio aspek 16:9 = 9 / 16 = 0,5625 =
padding-top: 56.25%
Setelah mengidentifikasi nilai rasio aspek, kita dapat menerapkannya ke penampung induk. Perhatikan contoh berikut:
<div class="container">
<img class="media" src="..." alt="...">
</div>
Kemudian kita bisa menulis CSS berikut:
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.media {
position: absolute;
top: 0;
}
Mempertahankan rasio aspek dengan aspect-ratio
aspect-ratio untuk menetapkan rasio aspek 1:1 pada gambar pratinjau postingan dalam carousel.Sayangnya, menghitung nilai padding-top ini tidak terlalu intuitif, dan memerlukan overhead dan positioning tambahan. Dengan properti CSS aspect-ratio intrinsik yang baru, bahasa untuk mempertahankan rasio aspek jauh lebih jelas.
Dengan markup yang sama, kita dapat mengganti: padding-top: 56.25% dengan aspect-ratio: 16 / 9, dengan menetapkan
aspect-ratio ke rasio yang ditentukan sebesar width / height.
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Menggunakan aspect-ratio, bukan padding-top, jauh lebih jelas, dan tidak merombak properti
padding untuk melakukan sesuatu di luar cakupan biasanya.
Properti baru ini juga menambahkan kemampuan untuk
menetapkan rasio aspek ke auto, dengan "elemen yang diganti dengan rasio aspek intrinsik menggunakan rasio
aspek tersebut; jika tidak, kotak ini tidak memiliki rasio aspek pilihan". Jika auto dan <ratio>
ditentukan bersama-sama, rasio aspek yang dipilih adalah rasio yang ditentukan dari width dibagi dengan height kecuali
jika merupakan elemen yang diganti dengan
rasio aspek intrinsik, dalam hal ini rasio aspek tersebut akan digunakan.
Contoh: konsistensi dalam petak
Ini sangat berfungsi dengan baik dengan mekanisme tata letak CSS seperti CSS Grid dan Flexbox juga. Pertimbangkan daftar dengan turunan yang ingin Anda pertahankan rasio aspek 1:1, seperti petak ikon sponsor:
<ul class="sponsor-grid">
<li class="sponsor">
<img src="..." alt="..."/>
</li>
<li class="sponsor">
<img src="..." alt="..."/>
</li>
</ul>
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.sponsor img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
Contoh: mencegah pergeseran tata letak
Fitur hebat lainnya dari aspect-ratio adalah kemampuannya membuat ruang placeholder untuk mencegah
Pergeseran Tata Letak Kumulatif dan menghasilkan Data Web yang lebih baik. Pada contoh pertama
ini, pemuatan aset dari API seperti Unsplash akan menghasilkan
perubahan tata letak saat media selesai dimuat.
Di sisi lain, penggunaan aspect-ratio akan membuat placeholder untuk mencegah pergeseran tata letak ini:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
Tips bonus: atribut gambar untuk rasio aspek
Cara lain untuk menetapkan rasio aspek gambar adalah melalui atribut gambar. Jika Anda sudah mengetahui dimensi gambar sebelumnya, praktik terbaik-nya adalah
menetapkan dimensi ini sebagai width dan height-nya.
Untuk contoh kita di atas, mengetahui dimensinya adalah 800x600 piksel, markup gambar akan terlihat seperti: <img src="image.jpg"
alt="..." width="800" height="600">. Jika gambar yang dikirim memiliki rasio aspek
yang sama, tetapi belum tentu nilai piksel yang tepat tersebut, kita masih dapat menggunakan nilai atribut
gambar untuk menetapkan rasio, yang dikombinasikan dengan gaya width: 100% agar
gambar menggunakan ruang yang tepat. Jika digabungkan, hasilnya akan terlihat seperti ini:
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
Pada akhirnya, efeknya sama dengan menetapkan aspect-ratio pada
gambar melalui CSS, dan pergeseran tata letak kumulatif dapat dihindari (lihat demo di
Codepen).
Kesimpulan
Dengan properti CSS aspect-ratio yang baru, yang diluncurkan di beberapa browser modern, mempertahankan rasio aspek yang tepat
di penampung media dan tata letak menjadi sedikit lebih mudah.
Foto oleh Amy Shamblen dan Lionel Gustave melalui Unsplash.