Properti rasio aspek CSS

Properti CSS yang membantu mempertahankan spasi dalam tata letak responsif.

Una Kravets

Catatan: Ringkasan: Menjaga rasio lebar-ke-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

Dukungan Browser

• 88
• 88
• 89
• 15

Sumber

Rasio aspek 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 terbaru, cenderung memiliki rasio aspek 16:9.

Dua gambar dengan rasio aspek yang sama. 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 saat mempertahankan rasio aspek menjadi penting adalah:

• Membuat iframe responsif, yang ukurannya 100% dari lebar induk, dan tingginya harus tetap berada di rasio area pandang tertentu
• Membuat penampung placeholder intrinsik untuk gambar, video, dan sematan guna 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
• Membuat ruang responsif yang seragam untuk beberapa gambar dengan dimensi yang bervariasi (dapat digunakan bersama object-fit)

Object-fit

Dengan menentukan rasio aspek, kami dapat menentukan ukuran media dalam konteks responsif. Alat lain di bucket ini adalah properti object-fit, yang memungkinkan pengguna mendeskripsikan cara objek (seperti gambar) dalam sebuah 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 menjadi dipersempit dan buram, karena menyesuaikan kembali piksel. Tidak ideal. object-fit: cover menggunakan dimensi terkecil gambar untuk mengisi ruang dan memangkas gambar agar sesuai dengan dimensi ini. Tindakan ini akan "memperbesar" pada batas terendah. object-fit: contain memastikan bahwa seluruh gambar selalu terlihat, dan sebaliknya dengan cover, yang menggunakan ukuran batas terbesar (dalam contoh di atas, ini adalah lebar), dan mengubah ukuran gambar untuk mempertahankan rasio aspek intrinsiknya sambil menyesuaikan dengan ruang. Kasus object-fit: none menampilkan gambar yang dipangkas di bagian tengahnya (posisi objek default) pada ukuran aslinya.

object-fit: cover cenderung berfungsi dalam sebagian besar situasi untuk memastikan antarmuka seragam yang 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 menggunakan flat lay produk kecantikan), pemangkasan konten penting tidak dapat diterima. Jadi, skenario idealnya adalah gambar responsif dengan berbagai ukuran yang sesuai dengan ruang UI tanpa pemangkasan.

Hack lama: mempertahankan rasio aspek dengan padding-top

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

Agar lebih responsif, kita dapat menggunakan rasio aspek. Hal ini memungkinkan kita untuk menetapkan ukuran rasio tertentu dan mendasarkan sisa media pada masing-masing sumbu (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 mutlak. Kemudian, Anda akan menghitung rasio aspek sebagai persentase untuk ditetapkan sebagai padding-top. Contoh:

• Rasio lebar tinggi 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, menghitung nilai padding-top ini tidak terlalu intuitif, dan memerlukan beberapa overhead dan pemosisian tambahan. Dengan properti CSS aspect-ratio intrinsik 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, 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;
}

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 tidak memiliki rasio aspek yang diinginkan". Jika auto dan <ratio> ditentukan bersama, rasio aspek yang diinginkan adalah rasio width yang ditentukan 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

Hal ini juga berfungsi dengan baik dengan mekanisme tata letak CSS seperti Petak CSS dan Flexbox. Pertimbangkan daftar dengan turunan yang ingin Anda pertahankan rasio aspeknya 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 dapat membuat ruang placeholder untuk mencegah Pergeseran Tata Letak Kumulatif dan memberikan Data Web yang lebih baik. Dalam contoh pertama ini, memuat aset dari API seperti Unsplash akan membuat perubahan 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 ditetapkan 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 sudah mengetahui dimensi gambar sebelumnya, sebaiknya tetapkan dimensi ini sebagai width dan height-nya.

Untuk contoh kita 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 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 sesuai. Semuanya akan terlihat seperti:

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

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

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 baru, yang diluncurkan di beberapa browser modern, mempertahankan rasio aspek yang tepat di media dan penampung tata letak Anda menjadi sedikit lebih mudah.

Foto oleh Amy Shamblen dan Lionel Gustave melalui Unsplash.