Properti rasio aspek CSS

Properti CSS yang membantu mempertahankan jarak dalam tata letak responsif.

Una Kravets

Catatan: Ringkasan: Mempertahankan rasio lebar terhadap tinggi yang konsisten, yang disebut rasio aspek, sangat penting dalam desain web responsif dan untuk mencegah pergeseran tata letak kumulatif. Sekarang, ada cara yang lebih mudah untuk melakukannya dengan properti aspect-ratio baru yang diluncurkan di Chromium 88, Firefox 87, dan Safari Technology Preview 118.

Rasio aspek

Browser Support

• 88
• 88
• 89
• 15

Source

Rasio aspek paling umum 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 yang lebih baru, cenderung memiliki rasio aspek 16:9.

Dua gambar dengan rasio aspek yang sama. Yang satu berukuran 634 x 951 piksel, sedangkan yang lainnya berukuran 200 x 300 piksel. Keduanya memiliki rasio aspek 2:3.

Dengan munculnya 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 tempat mempertahankan rasio aspek menjadi penting adalah:

• Membuat iframe responsif, yang lebarnya 100% dari lebar induk, dan tingginya harus tetap rasio area tampilan tertentu
• Membuat penampung intrinsik untuk gambar, video, dan sematan untuk mencegah tata letak ulang saat item dimuat dan menempati 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 dimensi yang bervariasi (dapat digunakan bersama object-fit)

Object-fit

Menentukan rasio aspek membantu kita menentukan ukuran media dalam konteks responsif. Alat lain dalam kategori ini adalah properti object-fit, yang memungkinkan pengguna mendeskripsikan cara objek (seperti gambar) dalam blok harus mengisi blok tersebut:

Menampilkan berbagai nilai object-fit. Lihat demo di Codepen.

Nilai initial dan fill menyesuaikan kembali gambar untuk mengisi ruang. Dalam contoh kita, hal ini menyebabkan gambar tertekan dan buram, karena menyesuaikan kembali piksel. Tidak ideal. object-fit: cover menggunakan dimensi terkecil gambar untuk mengisi ruang dan memangkas gambar agar sesuai dengan ruang tersebut berdasarkan dimensi ini. Objek "memperbesar" pada batas terendahnya. object-fit: contain memastikan bahwa seluruh gambar selalu terlihat, dan jadi kebalikan dari cover, yang mengambil ukuran batas terbesar (dalam contoh di atas adalah lebar), dan mengubah ukuran gambar untuk mempertahankan rasio aspek intrinsiknya sambil menyesuaikan dengan ruang. Kasus object-fit: none menampilkan gambar yang dipangkas di tengahnya (posisi objek default) dalam ukuran aslinya.

object-fit: cover cenderung berfungsi dalam sebagian besar situasi untuk memastikan antarmuka yang seragam dan bagus saat menangani gambar dengan dimensi yang bervariasi, tetapi Anda akan kehilangan informasi dengan cara ini (gambar dipangkas di tepi terpanjangnya).

Jika detail ini penting (misalnya, saat bekerja dengan tata letak datar produk kecantikan), memangkas konten penting tidak dapat diterima. Jadi, skenario idealnya adalah gambar responsif dengan berbagai ukuran yang sesuai dengan ruang UI tanpa dipangkas.

Solusi lama: mempertahankan rasio aspek dengan padding-top

Menggunakan padding-top untuk menyetel rasio aspek 1:1 pada gambar pratinjau postingan dalam carousel.

Agar lebih responsif, kita dapat menggunakan rasio aspek. Hal ini memungkinkan kita menetapkan ukuran rasio tertentu dan mendasarkan media lainnya 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 secara absolut. Kemudian, rasio aspek akan dihitung 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 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

Menggunakan aspect-ratio untuk menyetel rasio aspek 1:1 pada gambar pratinjau postingan dalam carousel.

Sayangnya, penghitungan nilai padding-top ini tidak terlalu intuitif, dan memerlukan beberapa overhead dan penentuan posisi tambahan. Dengan properti CSS intrinsik aspect-ratiobaru, bahasa untuk mempertahankan rasio aspek menjadi jauh lebih jelas.

Dengan markup yang sama, kita dapat mengganti: padding-top: 56.25% dengan aspect-ratio: 16 / 9, menetapkan aspect-ratio ke rasio width / height yang ditentukan.

Menggunakan padding-top

.container {
  width: 100%;
  padding-top: 56.25%;
}

Menggunakan rasio aspek

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Penggunaan aspect-ratio, bukan padding-top, jauh lebih jelas, dan tidak mengubah total 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 tidak memiliki rasio aspek pilihan." Jika auto dan <ratio> ditentukan bersama-sama, rasio aspek pilihan adalah rasio yang ditentukan dari width dibagi dengan height, kecuali jika elemen tersebut adalah elemen yang diganti dengan rasio aspek intrinsik, yang dalam hal ini rasio aspek tersebut akan digunakan.

Contoh: konsistensi dalam petak

Hal ini juga berfungsi dengan sangat baik dengan mekanisme tata letak CSS seperti CSS Grid dan Flexbox. 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;
}

Gambar dalam petak dengan elemen induknya pada berbagai dimensi rasio aspek. Lihat demo di Codepen.

Contoh: mencegah pergeseran tata letak

Fitur hebat lainnya dari aspect-ratio adalah kemampuannya untuk membuat ruang penampung guna mencegah Pergeseran Tata Letak Kumulatif dan memberikan Web Vitals yang lebih baik. Dalam contoh pertama ini, memuat aset dari API seperti Unsplash akan menyebabkan pergeseran tata letak saat media selesai dimuat.

Video pergeseran tata letak kumulatif yang terjadi saat tidak ada rasio aspek yang ditetapkan pada aset yang dimuat. Video ini direkam dengan jaringan 3G yang diemulasi.

Di sisi lain, penggunaan aspect-ratio akan membuat placeholder untuk mencegah pergeseran tata letak ini:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Video dengan rasio aspek yang ditetapkan disetel pada aset yang dimuat. Video ini direkam dengan jaringan 3G yang diemulasi. Lihat demo di Codepen.

Tips bonus: atribut gambar untuk rasio aspek

Cara lain untuk menetapkan rasio aspek gambar adalah melalui atribut gambar. Jika Anda mengetahui dimensi gambar sebelumnya, praktik terbaiknya adalah menetapkan dimensi ini sebagai width dan height-nya.

Untuk contoh di atas, dengan mengetahui bahwa dimensinya adalah 800 px x 600 px, markup gambar akan terlihat seperti: <img src="image.jpg" alt="..." width="800" height="600">. Jika gambar yang dikirim memiliki rasio aspek yang sama, tetapi tidak harus nilai piksel yang sama persis, kita masih dapat menggunakan nilai atribut gambar untuk menetapkan rasio, yang dikombinasikan dengan gaya width: 100% sehingga gambar menempati ruang yang tepat. Jika digabungkan, tampilannya akan seperti ini:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

Pada akhirnya, efeknya sama dengan menyetel aspect-ratio pada gambar melalui CSS, dan pergeseran tata letak kumulatif dihindari (lihat demo di Codepen).

Kesimpulan

Dengan properti CSS aspect-ratio baru yang diluncurkan di beberapa browser modern, mempertahankan rasio aspek yang tepat dalam media dan penampung tata letak Anda menjadi sedikit lebih mudah.

Foto oleh Amy Shamblen dan Lionel Gustave melalui Unsplash.