CSS Barebone Untuk Fluid Images – Beberapa hari yang lalu, CarolSaysThings mengangkat apa yang saya harapkan menjadi pertanyaan sederhana sampai saya mulai mempertanyakan apa yang sudah saya ketahui.

Carol melakukan beberapa markup gambar (dihasilkan oleh Eleventy Image) dan bertanya tentang cara terbaik untuk membuat gambar mulus (cocok dengan lebar wadahnya).

CSS Barebone Untuk Fluid Images
Source : barebonescms.com

Saya tahu saya tahu ini dengan baik dan dapat menggunakannya dalam pekerjaan saya sendiri, tetapi saya mulai menyadari bahwa mungkin saya tidak cukup tahu tentang topik ini untuk mengajari saya, jadi saya akan mempelajarinya lebih dalam.

Tujuan utama: Saya ingin menguji width: 100% vs max-width: 100%, dan bagaimana mereka berinteraksi dengan atribut [width][height] dan srcset.

Sekarang, pendekatan saya yang biasa adalah memunculkan beberapa lebar: tambahkan width: 100% ke konten, lalu beri nama “hari”. width: 100% CSS memaksa gambar untuk mengisi [width] wadah. Ini akan menimpa properti [lebar] yang Anda setel. Kerugiannya adalah gambar mungkin melebihi ukurannya sendiri dan mungkin tampak buram.

Baca Juga : Tips Memperbaiki Render-Blocking JavaScript Dan CSS

Dalam setiap kasus berikut, gambar 200 × 200 digunakan dalam penampung 150px (menyusut) dan penampung 300px (pertumbuhan).

Source : zachleat.com

100% dari max-width mengacu pada ukuran container. Terkadang atribut [width] akan lebih kecil dari penampung ini, yang berarti gambar tidak akan selalu memiliki lebar penuh. Faktanya, ukuran sebuah gambar tidak akan pernah melebihi ukuran internal atau ukuran internalnya sendiri.

Cara lain untuk memikirkan hal ini, lebar gambar bisa berada dalam kisaran 0 sampai [width], bergantung pada ukuran penampung.

Source : zachleat.com

Mari gunakan srcset untuk menambahkan lebar gambar lain yang memenuhi syarat (sekarang 200px dan 400px) dan lihat apa yang terjadi. Peringatan spoiler: tidak ada kejutan di sini!

Source : zachleat.com

Pertahankan dua lebar gambar yang memenuhi syarat (200px dan 400px) selama pemutaran, mari beralih menggunakan max-width: 100%.

Source : zachleat.com

Di sinilah akhirnya karet bertemu dengan jalan. Bagi saya, tes di atas adalah bagian paling mengejutkan dari penelitian – dan mengapa analisis yang lebih dalam tentang topik pengantar ini sangat berharga (bagi saya).

Ketika saya secara tradisional menggunakan width: 100%, itu mendorong properti [width]. Tapi lebar maksimum ketat: sekarang 100% bersaing dengan atribut [width]. Solusi sederhana adalah menambahkan width: auto dipasangkan dengan max-width: 100% CSS. Ini terlihat seperti ini:

Source : zachleat.com

Ketika Eleventy Image menghasilkan lebih dari satu tanda ukuran, elemen <img> menggunakan sumber ukuran / kualitas terendah. Tetapi perilaku ini membuat saya berpikir bahwa saat memainkan srcset, ukuran maksimum harus digunakan untuk properti [width] dan [height]. Saya tidak tahu apa yang akan Anda pikirkan? Faktanya, ini terlihat seperti ini:

Source : zachleat.com

Ini membuat max-width: 100% lebih dapat diprediksi, karena ketika [width][height] tidak disertakan atau ketika width: auto dinonaktifkan, ukuran yang dirender sekarang cocok dengan perilakunya. Lebar maksimum sekarang cocok dengan benar dengan lebar inheren dari gambar terbesar di daftar srcset.

Pembaruan pada 24 Februari 2021: Eleventy Image v0.8.0 dengan pengoptimalan atribut [width][height] di atas telah dirilis.

Baca Juga : Konfigurasi Automod Pada Aplikasi Phpbb

Sekali lagi-sebenarnya, saya menyarankan untuk memasangkan max-width: 100% dengan width: auto untuk mengatasi masalah ini dengan cara yang paling sederhana, tetapi ini dapat membantu menghindari kebingungan bagi sebagian orang yang tidak memahami masalah ini.

Kesimpulan (aka TL;DR) #

  • Jika container lebih kecil dari gambar, semua metode ini bekerja dengan cara yang sama.
  • max-width: 100% : Jika Anda tidak berhati-hati dengan ukuran wadah, yang akan memberi Anda beberapa gambar buram.
  • Gunakan max-width: 100% membatasi gambar ke container, tapi hati-hati saat menggunakannya dengan srcset batas atasnya mungkin lebih kecil daripada saat menggunakan [width]! Sandingkan dengan width: autountuk memperbaiki masalah ini secara otomatis.
  • Tapi mungkin dari perspektif esoteris, saya akan meninggalkan pertanyaan: Ketika Anda membuat daftar beberapa ukuran gambar di daftar srcset, ukuran mana yang harus digunakan untuk atribut [width] dan [height]? Saya agak ingin menggunakan yang terbesar-adakah kerugian yang jelas untuk melakukan ini?

Copy Dan Paste #

Menulis artikel ini tanpa saya sadari telah meninggalkan bagian terpenting cara membuat  width: 100%! Saya pikir ini adalah bagaimana boilerplate saya akan bergerak maju (menggunakan width: auto untuk rendering seperti contoh di atas):

img {
max-width: 100%;
}
img[width] {
width: auto; /* Defer to max-width */
}
img[width][height] {
height: auto; /* Preserve aspect ratio */
}

/* Let SVG scale without boundaries */
img[src$=”.svg”] {
width: 100%;
height: auto;
max-width: none;
}