Properti CSS rasio aspek baru yang didukung di Chromium, Safari Technology Preview, dan Firefox Nightly

Properti CSS baru yang membantu menjaga spasi dalam tata letak responsif.

Una Kravets

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:

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

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

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.