Properti CSS baru yang membantu menjaga spasi dalam tata letak responsif.
Rasio aspek
Rasio aspek biasanya dinyatakan sebagai dua bilangan bulat dan tanda titik dua dalam dimensi: width:height, atau x:y. Rasio aspek yang paling umum untuk fotografi adalah 4:3 dan 3:2, sedangkan video, dan kamera konsumen yang lebih baru, cenderung memiliki rasio aspek 16:9.
Dengan munculnya desain responsif, menjaga rasio aspek menjadi semakin penting developer web, terutama karena dimensi gambar berbeda dan ukuran elemen berubah berdasarkan spasi.
Beberapa contoh saat mempertahankan rasio aspek menjadi penting adalah:
- Membuat iframe responsif, dengan panjang 100% dari lebar induk, dan tingginya harus tetap rasio area pandang tertentu
- Membuat penampung placeholder intrinsik untuk gambar, video, dan sematan untuk mencegah tata letak ulang saat item dimuat dan menggunakan ruang
- Menciptakan ruang yang seragam dan responsif untuk visualisasi data interaktif atau animasi SVG
- Membuat ruang yang seragam dan responsif untuk komponen multi-elemen seperti kartu atau tanggal kalender
- Menciptakan ruang yang seragam dan responsif untuk berbagai gambar dari berbagai dimensi (dapat digunakan bersama
object-fit
)
Pas di objek
Dengan menentukan rasio aspek, kami dapat menentukan ukuran media dalam konteks responsif. {i>Tool<i} lain dalam
bucket adalah properti object-fit
, yang memungkinkan pengguna mendeskripsikan cara suatu objek (seperti gambar)
dalam satu blok harus mengisi blok itu:
Nilai initial
dan fill
menyesuaikan kembali gambar untuk mengisi ruang. Dalam contoh kita, ini menyebabkan
gambar menjadi dipersempit dan buram, saat piksel menyesuaikan kembali. Tidak ideal. object-fit: cover
penggunaan
dimensi terkecil gambar untuk mengisi ruang dan memangkas gambar agar sesuai dengannya berdasarkan
dimensi kustom. Fitur "memperbesar" pada batas terendahnya. object-fit: contain
memastikan bahwa seluruh gambar
selalu terlihat, sehingga kebalikan dari cover
, yang mengambil ukuran batas terbesar
(pada contoh di atas, ini adalah lebar), dan mengubah ukuran gambar untuk mempertahankan rasio aspek intrinsiknya
sembari menyesuaikan
dengan ruang tersebut. Kasus object-fit: none
menampilkan gambar yang dipangkas di bagian tengahnya
(posisi objek default) pada ukuran alaminya.
object-fit: cover
cenderung berfungsi di sebagian besar situasi untuk memastikan antarmuka seragam yang bagus saat menangani
dengan gambar dari berbagai dimensi, namun, Anda kehilangan informasi dengan cara ini (gambar dipangkas pada
tepi terpanjangnya).
Jika detail ini penting (misalnya, saat menangani tata letak datar produk kecantikan), memangkas konten yang penting tidak dapat diterima. Jadi skenario yang ideal adalah gambaran responsif dari berbagai ukuran sesuai dengan ruang UI tanpa pemangkasan.
Metode lama: mempertahankan rasio aspek dengan padding-top
Untuk membuatnya lebih responsif, kita dapat menggunakan rasio aspek. Hal ini memungkinkan kita untuk menetapkan ukuran rasio tertentu dan buat media lainnya berdasarkan pada masing-masing sumbu (tinggi atau lebar).
Solusi lintas browser yang saat ini diterima dengan baik untuk mempertahankan rasio aspek berdasarkan
dikenal sebagai "Padding-Top Hack". Solusi ini memerlukan container induk dan
container turunan yang benar-benar ditempatkan. Kemudian kita akan menghitung rasio aspek
sebagai persentase yang harus 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>
Selanjutnya, kita dapat 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
Sayangnya, menghitung nilai padding-top
ini tidak terlalu intuitif, dan memerlukan beberapa
overhead dan positioning tambahan. Dengan CSS aspect-ratio
intrinsik yang baru
, bahasa untuk mempertahankan aspek
rasio ini menjadi jauh lebih jelas.
Dengan markup yang sama, kita dapat mengganti: padding-top: 56.25%
dengan aspect-ratio: 16 / 9
, setelan
aspect-ratio
dengan rasio width
/ height
yang ditentukan.
.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 padding
properti untuk melakukan sesuatu
di luar cakupan biasanya.
Properti baru ini juga
menambahkan kemampuan untuk
menetapkan rasio aspek ke auto
, dengan "mengganti elemen dengan rasio aspek intrinsik, menggunakan aspek tersebut
rasio; jika tidak, kotak tersebut tidak memiliki rasio aspek yang diinginkan." Jika auto
dan <ratio>
adalah
ditentukan bersama-sama, rasio aspek yang disarankan adalah rasio width
yang ditentukan dibagi height
,
merupakan elemen yang diganti dengan
rasio aspek intrinsik, di mana rasio aspek tersebut digunakan.
Contoh: konsistensi dalam petak
Ini bekerja dengan sangat baik dengan mekanisme tata letak CSS seperti CSS Grid dan Flexbox. Pertimbangkan daftar dengan anak-anak 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 dapat membuat ruang placeholder untuk mencegah
Pergeseran Tata Letak Kumulatif dan memberikan Data Web yang lebih baik. Dalam
misalnya, memuat aset dari API seperti Unsplash akan membuat
pergeseran tata letak ketika 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 adalah
menyetel dimensi ini sebagai width
dan height
.
Untuk contoh kami di atas, jika dimensinya diketahui 800 x 600 piksel, markup gambar akan terlihat seperti ini: <img src="image.jpg"
alt="..." width="800" height="600">
. Jika gambar yang dikirim memiliki aspek yang sama
tapi tidak harus dengan nilai piksel yang sama persis, kita masih bisa menggunakan
nilai atribut untuk menetapkan rasio, dikombinasikan dengan gaya width: 100%
sehingga
bahwa gambar tersebut memenuhi
ruang yang tepat. Semuanya akan terlihat seperti:
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
Pada akhirnya, efeknya sama dengan menyetel aspect-ratio
pada
gambar melalui CSS, dan pergeseran tata letak kumulatif dapat dihindari (lihat demo di
Pena kode).
Kesimpulan
Dengan properti CSS aspect-ratio
yang baru, diluncurkan di beberapa browser modern, menjaga
di penampung media dan tata letak Anda akan menjadi sedikit lebih mudah.
Foto oleh Amy Shamblen dan Lionel Gustave melalui Unsplash.