Gambar memerlukan berbagai mode ukuran agar sesuai dengan tata letak responsif. Di sini kita akan melihat hubungan antara elemen dan visual serta opsi ukuran dasar. Saya juga akan melihat beberapa fitur tambahan yang bermanfaat, yang belum semuanya pernah saya terapkan sebelumnya.

Elemen dan konten visual

Saat mempertimbangkan “model kotak”, sering terjadi kebingungan antara kotak konteks dengan konten visual itu sendiri. Jika elemen diciutkan sesuai ukuran konten visual, tidak akan ada perbedaan ukurannya. Namun, jika elemen diperluas untuk mengisi ruang, visualnya mungkin tidak memenuhi area yang tersedia.

Sebelum kita masuk ke gambar, mari kita pertimbangkan konsep ini dengan elemen lingkaran terlebih dahulu. Lingkaran akan selalu berupa lingkaran, bukan elips.

Elemen lingkaran bisa lebih besar dari visual; lingkaran berpusat pada area elemen yang tersedia, meluas ke lebar atau tinggi.

Elemen gambar harus menghadapi situasi yang sama: ukuran elemen belum tentu sama ukurannya dengan gambar. Cara yang benar untuk mengukur dan memposisikan visual bergantung pada desain; kita harus menyediakan properti untuk menentukan apa yang terjadi. Di Fuse saya menyebutnya StretchMode; Dalam CSS ini adalah properti background-size atau object-fit.

Piksel dan Titik tepat

Mungkin mode ukuran yang paling jelas adalah hanya menggunakan ukuran alami gambar; berapapun ukuran elemennya, kita akan menggambar gambar apa adanya dan memotong tepinya atau menyisakan ruang kosong.

Mode ukuran ini paling sering digunakan dalam tata letak di mana elemennya memiliki ukuran yang sama dengan gambar. Misalnya, Anda dapat menggunakan ikon di bilah judul dan membiarkannya menentukan ukurannya.

Kita perlu menyelesaikan pertanyaan tentang “ukuran alami” apa yang sedang kita bicarakan. Kita bisa menggunakan piksel atau titik. Mode ukuran piksel yang tepat diperlukan bila Anda ingin gambar terlihat tajam di layar, tanpa mengubah ukuran. Mode titik presisi digunakan saat Anda ingin gambar menentukan ukuran elemen dan konsisten di seluruh perangkat.

Mode presisi piksel sulit digunakan di perangkat seluler karena perangkat memiliki kepadatan piksel-ke-titik yang sangat berbeda. Jika diinginkan, elemen ini harus digunakan bersama dengan gambar dengan kepadatan ganda: elemen gambar yang menggunakan file sumber berbeda bergantung pada kepadatan target. Di Fuse, saya menambahkan mode PointPrefer untuk mendapatkan yang terbaik dari kedua dunia: ia menggunakan mode presisi piksel jika salah satu ukuran piksel cukup dekat dengan ukuran titik; jika tidak, gambar yang paling dekat dengan ukuran titik yang diinginkan akan diregangkan.

Isi dan Skala9

Gambar sering kali digunakan untuk mengisi suatu area, memberikan latar belakang, batas, atau mungkin pembatas. Hal ini memerlukan gambar untuk meregang, mengisi seluruh area elemen, meskipun gambar itu sendiri terdistorsi.

Foto di atas membantu menunjukkan distorsi, namun fitur pengisian sepertinya tidak cocok untuk gambar seperti itu.

Fitur peregangan yang bermanfaat adalah peregangan 9 kotak: gambar dibagi menjadi sembilan area dan diregangkan sendiri-sendiri. Hal ini memungkinkan pembuatan batas untuk elemen berukuran dinamis. CSS menyediakan fitur yang cukup kuat dengan border-image.

Seragam dan UniformToFill

Jika keseluruhan gambar harus sesuai dengan elemen, dan rasio aspek harus dipertahankan, kita menggunakan mode Uniform (disebut contain dalam CSS). Ini memperbesar ukuran gambar sehingga menyentuh dua sisi area yang tersedia, membiarkan sisa elemen kosong.

Jika sebaliknya, Anda ingin mengisi seluruh elemen dan tetap mempertahankan rasio aspek, kami menggunakan mode UniformToFill (disebut cover dalam CSS). Ini menskalakan gambar hingga mencapai semua tepi elemen, memotong bagian-bagian di luar elemen.

Penyelarasan Konten

Selain mode Fill atau Scale9, gambar tidak sesuai dengan ruang yang tersedia. Hal ini menyisakan pertanyaan di mana memposisikan gambar? Apakah gambar Uniform harus diposisikan ke kiri atau ke kanan? Haruskah gambar UniformToFill lebih memilih menampilkan bagian bawah atau atas gambar?

Menambahkan ContentAlignment ke Image memungkinkan pengguna menentukan opsi ini. Default yang baik adalah mewarisi perataan elemen gambar. Jika Anda menyelaraskan gambar ke kanan bawah, Anda tentu mengharapkan visualnya juga sejajar ke kanan bawah.

Salah satu pilihan yang tidak pernah saya terapkan sendiri adalah penahan; penyelarasan dasar tidak cukup mencakup nuansa desain. Jangkar memungkinkan kita memilih tempat yang menarik pada foto dan memastikannya berada di tengah, seperti wajah untuk gambar profil.

Perluasan konsep ini adalah area penahan: alih-alih hanya sebuah titik, kita menandai persegi panjang yang diinginkan pada gambar sumber. Ini akan membuka kemungkinan mode Uniform yang memastikan area yang diinginkan ditampilkan sepenuhnya, dan sisa gambar dapat digunakan untuk mengisi area kosong.

Saya menduga sebagian besar layanan memerlukan foto profil persegi karena tidak tersedia penahan. Dengan penahan, Anda dapat menerima foto dengan ukuran apa pun, membiarkan pengguna menandai area wajah, atau mendeteksinya, lalu menggunakan keseluruhan gambar dalam desain responsif.

Pilihan

Untuk Fuse, kami juga memiliki opsi StretchDirection. Ini bisa berupa salah satu dari Both (default), UpOnly, atau DownOnly. Sebuah gambar hanya akan meregang ke arah yang diperbolehkan. Misalnya, jika kita memiliki Image {StretchMode=Uniform StretchDirection=DownOnly}, visualnya akan menyusut agar sesuai dengan elemen, namun tidak akan pernah meluas melebihi ukuran aslinya. Dalam praktiknya, kasus penggunaan untuk hal ini terbatas.

Bendera opsional Fill memberikan cara alternatif untuk mengisi area kosong elemen. Setelah memposisikan elemen dengan mode peregangan, ini akan diulangi untuk menutupi ruang yang tersisa. Ini paling masuk akal untuk gambar latar belakang, atau bila digunakan sebagai kuas.

Selain penahan, properti Offset memungkinkan pembuatan animasi sederhana. Posisikan dan ukur visual secara normal, lalu terapkan offset pada posisi yang dihasilkan. Kemungkinan besar ini akan digabungkan dengan tanda Fill pada gambar bersusun.

Elemen lainnya

Jika Anda sedang menulis mesin UI, Anda mungkin tertarik mengetahui cara melakukan semua penghitungan ini. Beri tahu saya jika Anda menyukai artikel seperti itu - artikel ini lebih dominan dalam matematika, meskipun tidak rumit. Di Fuse, Anda dapat mencari kelas SizingContainer yang merangkum sebagian besar logika — meskipun kode perhitungan tata letak juga merupakan bagian darinya.

Hal yang menarik tentang mode ukuran ini adalah bahwa mode ini dapat diterapkan pada sejumlah tipe elemen apa pun, bukan hanya gambar. Properti generik CSS object-fit mengarah ke sana. Saya bahkan menerapkan Viewbox sekali yang menskalakan elemen arbitrer, yang mendukung StretchDirection tetapi memaksa mode pengisian Uniform.

Konsep ini berulang; menggabungkan semua kegunaan yang beragam ke dalam satu set properti akan menjadi tujuan yang baik untuk mesin UI baru. Meskipun beberapa kombinasi tidak masuk akal untuk elemen tertentu, memiliki kumpulan properti yang sama akan mengurangi kurva pembelajaran dan memastikan kumpulan fitur yang kaya.

Baca lebih banyak artikel tentang menulis Mesin UI. Ikuti saya di Twitter, dan agar saya terus menulis, pertimbangkan untuk menjadi patron.