# 133: Mencari Gambar Responsif - Trik CSS

Saya mungkin agak jarang karena saya lebih suka mencoba mengikuti hal gambar responsif. Ini adalah masalah menarik yang menghasilkan banyak solusi menarik. Semuanya mulai selesai sekarang, sekarang solusi resminya adalah:

1. dan teman-teman
2. 

   Katakanlah kita berada di layar 1x. Karena kami telah memberi tahu browser bahwa kami akan menggunakan gambar ini sebesar mungkin (100% viewport), "breakpoint" saat browser akan membalik gambar akan terjadi pada 1280px, 640px, dan 320px, ukuran persis sama seperti yang kami katakan pada gambar tersebut.

   Jika kita berada di layar 2x, "breakpoint" tersebut akan dipotong menjadi dua (terlepas dari apa yang sebenarnya kita lakukan untuk mengukur gambar tersebut) dan akan menjadi 640px, 320px, dan 160px.

   Sekarang katakanlah kita menggunakan gambar yang sama, tetapi kita tahu lebih banyak tentang tata letak halaman kita, dan menggunakan sesuatu seperti ini:

   Di sini kami katakan (dengan sizesatribut), jika viewport 500px atau lebih kecil, kami bermaksud untuk menampilkan gambar dengan lebar 250px. Jika viewport lebih lebar dari itu, tampilkan gambar dengan lebar 500px.

   Itu akan cocok dengan CSS seperti ini:

   img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

   Pada layar 1x, Anda akan selalu mendapatkan gambar 320w (kecil) jika viewport memiliki lebar 500px atau lebih kecil, dan Anda akan selalu mendapatkan gambar 640w (sedang) saat viewport lebih besar. Anda tidak akan pernah mendapatkan gambar yang besar, karena ini dapat memberi tahu Anda tidak akan membutuhkan banyak piksel.

   Ona 2x, Anda akan selalu mendapatkan gambar 640w (sedang) saat viewport lebarnya 500px atau lebih kecil (karena menurutnya perlu 500px piksel dan yang kecil tidak cukup di 320px), dan Anda akan selalu mendapatkan Gambar 1280w (besar) saat viewport lebih besar. Anda tidak akan pernah mendapatkan gambar kecil, karena piksel tidak pernah cukup untuk menutupi apa yang Anda katakan bahwa Anda bermaksud untuk membuat gambar.

   Ukuran Sebenarnya

   Ingat ukuran sebenarnya dari gambar tersebut masih terserah Anda. Saya akan berpikir dalam sebagian besar kasus Anda melakukannya melalui CSS. Dan CSS selalu menang. Apa yang Anda nyatakan akan menjadi lebar gambar yang diberikan tidak peduli apa yang terjadi dengan srcsetdan sizesbarang. Itu baru saja menentukan gambar mana yang akan ditampilkan.

   Inilah yang membuat atribut ukuran agak sulit. Katakanlah Anda memiliki sesuatu seperti:

   .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

   Itu sama sekali tidak aneh. Jadi sekarang ukuran apa yang Anda gunakan dalam sizesatribut? Itu akan menjadi 13,33% (mengalikan semuanya) karena angka tersebut harus relatif terhadap viewport, bukan penampung. Dan itu tidak memperhitungkan margin dan bantalan serta barang-barang di wadah itu, jadi ini semacam tebakan. Saya kira jumlah dekat di sepatu kuda, granat tangan, dan atribut ukuran.

   Kemudian katakanlah kueri media muncul dan badan sebenarnya menjadi 75% lebar di atas semua itu. Anda perlu mengetahuinya agar Anda dapat menyesuaikan menurut Anda berapa ukuran gambar yang ditampilkan. Atribut ukuran Anda mungkin menjadi:

   sizes="(min-width: 500px) 8%, 13.33%"

   Kemudian lakukan itu lagi untuk setiap kueri media tata letak yang Anda miliki yang memengaruhi gambar konten. Ini bisa menjadi sedikit rumit.

   Ukuran Praktis?

   Saya menduga sebagian besar penggunaan dunia nyata akan menggunakan sesuatu seperti:

   Dengan asumsi bahwa gambar konten akan berukuran sekitar setengah dari ukuran jendela browser di layar besar dan ukuran penuh dari jendela browser di layar kecil - biarkan breakpoint terjadi di tempat terjadinya. Anda masih akan mendapatkan pilihan yang cukup baik dengan cara ini tanpa harus bekerja keras untuk mencocokkan semua kueri media Anda dengan tepat.

   Dan ingat ini adalah gambar konten. HTML cenderung bertahan lebih lama daripada CSS atau JS, terutama jika itu isinya.

   Hal Lain Yang Perlu Diketahui

   Anda juga dapat menentukan apakah gambar 2x atau 1x dengan srcset. Jadi kasus penggunaan yang sangat sederhana dapat berupa:

   Itu saja sudah cukup berguna. Jangan mencampurnya dengan lebar yang ditentukan. Seperti yang dikatakan Eric Portis:

   Dan sekali lagi izinkan saya menekankan bahwa meskipun Anda dapat melampirkan deskriptor resolusi 1x / 2x ke sumber srcsetsebagai pengganti wdeskriptor, 1x / 2x & w tidak dapat digabungkan. Jangan gunakan keduanya secara bersamaan srcset. Betulkah.

   Dan ingat ketika saya mengatakan isi gambar asli itu mudah? Yang baru bisa semudah itu, tetapi elemen di dalamnya juga mendukung srcsetdan sizes. Itu berarti Anda bisa menjadi sangat spesifik. Ini menambahkan lapisan lain untuk ini:

   1. Anda memutuskan yang mana

      Tautan

      • Artikel Martin Wolf yang menginspirasi ini
      • Picturefill adalah polyfill yang ingin Anda gunakan.
      • Artikel Smashing Magazine di Picturefill 2.0 oleh Tim Wright
      • Eric Portis tentang mengapa Srcset dan ukuran ada dan apa yang diselesaikan lebih baik daripada kueri media
      • Eric Portis dengan lebih banyak tentang yang baru

      Lihat testcase Pen srcset & size oleh Chris Coyier (@chriscoyier) di CodePen.