# 133: Mengetahui Imej Responsif - Trik CSS

Saya mungkin agak jarang kerana saya lebih senang mencuba untuk terus mengikuti gambar yang responsif. Ini adalah masalah menarik yang menghasilkan banyak penyelesaian menarik. Seluruhnya mula diselesaikan sekarang, setelah penyelesaian rasmi adalah:

1. dan rakan
2. 

   Katakan kita berada di skrin 1x. Kerana kami telah memberitahu penyemak imbas kami akan menggunakan gambar-gambar ini seluas mungkin (100% dari viewport), "breakpoints" untuk bila penyemak imbas akan membalikkan gambar akan berlaku pada 1280px, 640px, dan 320 piksel, ukuran yang sama persis seperti yang kami katakan gambarnya.

   Sekiranya kita berada di layar 2x, "titik putus" tersebut akan dipotong menjadi separuh (tidak kira apa yang sebenarnya kita lakukan untuk mengukur gambar tersebut) dan akan berukuran 640 piksel, 320 piksel, dan 160 piksel.

   Sekarang katakan kita menggunakan gambar yang sama, tetapi kita tahu lebih banyak mengenai susun atur halaman kita, dan menggunakan sesuatu seperti ini:

   Di sini kami katakan (dengan sizesatribut), jika viewport 500px atau lebih kecil, kami bermaksud untuk memaparkan gambar dengan lebar 250px. Sekiranya ruang pandang lebih luas dari itu, paparkan gambar dengan lebar 500px.

   Itu sesuai dengan CSS seperti ini:

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

   Pada skrin 1x, anda akan selalu mendapat gambar 320w (kecil) ketika viewport selebar 500px atau lebih kecil, dan anda akan selalu mendapat gambar 640w (sederhana) apabila viewport lebih besar. Anda tidak akan mendapat gambar yang besar, kerana ia dapat memberi gambaran bahawa anda tidak akan memerlukan piksel sebanyak itu.

   Skrin Ona 2x, anda akan selalu mendapat gambar 640w (sederhana) apabila viewport selebar 500px atau lebih kecil (kerana menganggapnya memerlukan 500px piksel dan yang kecil tidak cukup pada 320px), dan anda akan selalu mendapat Gambar 1280w (besar) apabila viewport lebih besar. Anda tidak akan pernah mendapat gambar yang kecil, kerana pikselnya tidak cukup untuk menutupi apa yang anda katakan kepadanya yang anda maksudkan untuk menghasilkan gambar.

   Saiz Sebenar

   Ingat ukuran sebenar gambar masih terpulang kepada anda. Saya fikir dalam kebanyakan kes, anda melakukannya melalui CSS. Dan CSS sentiasa menang. Apa yang anda mengisytiharkan akan ada lebar diberikan imej tidak kira apa yang berlaku dengan srcsetdan sizesbarangan. Itu hanya dapat menentukan gambar mana yang akan ditunjukkan.

   Inilah yang menjadikan atribut ukuran agak sukar. Katakan anda mempunyai sesuatu seperti:

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

   Itu sama sekali tidak biasa. Jadi sekarang ukuran apa yang anda gunakan dalam sizesatribut? Itu adalah 13.33% (gandakan semuanya bersama-sama) kerana bilangan itu harus relatif dengan pandangan, bukan wadah. Dan itu tidak mengambil kira margin dan padding dan barang-barang di dalam bekas tersebut, jadi itu adalah tekaan. Saya kira jumlah jarak dekat dalam kasut kuda, bom tangan, dan atribut ukuran.

   Oleh itu, katakan pertanyaan media muncul dan bahagian badannya menjadi selebar 75% di atas semua itu. Anda perlu mengetahui bahawa anda boleh menyesuaikan ukuran gambar yang akan anda gambarkan. Atribut saiz anda mungkin menjadi:

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

   Kemudian selidiki sekali lagi untuk setiap pertanyaan media susun atur yang anda miliki yang mempengaruhi gambar kandungan. Ia boleh menjadi agak rumit.

   Ukuran Praktikal?

   Saya mengesyaki kebanyakan penggunaan dunia nyata akan menggunakan seperti:

   Dengan mengandaikan bahawa gambar kandungan akan berada di sekitar separuh ukuran tetingkap penyemak imbas di layar besar dan ukuran penuh tetingkap penyemak imbas di layar kecil - biarkan titik putus berlaku di mana ia berlaku. Anda masih akan mendapat pilihan yang cukup baik dengan cara ini tanpa membebankan semua pertanyaan media anda.

   Dan ingat ini adalah gambar kandungan. HTML cenderung bertahan lebih lama daripada CSS atau JS, terutama ketika kandungannya.

   Perkara Lain Yang Perlu Tahu

   Anda juga boleh menentukan sama ada gambar berukuran 2x atau 1x dengan srcset. Oleh itu, kes penggunaan yang sangat mudah ialah:

   Itu sahaja cukup berguna. Jangan mencampurkannya dengan menentukan lebar. Seperti yang dikatakan oleh Eric Portis:

   Dan sekali lagi saya tegaskan bahawa walaupun anda boleh melampirkan deskriptor resolusi 1x / 2x ke sumber srcsetbukannya wdeskriptor, 1x / 2x & w tidak bercampur. Jangan gunakan keduanya sama srcset. Betul.

   Dan ingat ketika saya mengatakan gambar yang asli itu senang? Yang baru semudah itu, tetapi unsur - unsur di dalamnya juga menyokong srcsetdan sizes. Ini bermakna anda boleh mendapatkan yang sangat spesifik. Ini menambah lapisan lain untuk ini:

   1. Anda memutuskan yang mana

      Pautan

      • Artikel Martin Wolf yang mengilhami ini
      • Picturefill adalah polyfill yang anda mahu gunakan.
      • Artikel Smashing Magazine pada Picturefill 2.0 oleh Tim Wright
      • Eric Portis mengenai mengapa Srcset dan ukuran wujud dan penyelesaiannya lebih baik daripada pertanyaan media
      • Eric Portis dengan lebih banyak mengenai yang baru

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