# 133: Descoperirea imaginilor sensibile - CSS-Tricks

Anonim

Probabil sunt un pic rar în sensul că mi-a plăcut mai mult să încerc să țin pasul cu chestiunile cu imagini receptive. Este o problemă interesantă care a generat o mulțime de soluții interesante. Totuși, totul începe să se încheie acum, acum că soluțiile oficiale sunt:

  1. Si prieteni

  2. Să presupunem că suntem pe un ecran de 1x. Deoarece am spus browserului că vom folosi aceste imagini cât mai mari posibil (100% din fereastra de vizualizare), „punctele de întrerupere” pentru momentul în care browserul va afișa imaginile vor avea loc la 1280 px, 640 px, și 320px, aceleași dimensiuni exacte pe care le-am spus că sunt imaginile.

    Dacă suntem pe un ecran de 2x, acele „puncte de întrerupere” se vor reduce la jumătate (indiferent de ceea ce facem de fapt pentru a măsura acele imagini) și vor fi la 640px, 320px și 160px.

    Acum să presupunem că folosim aceleași imagini, dar știm mult mai multe despre aspectul paginii noastre și am folosit ceva de genul acesta:

    Aici spunem (cu sizesatributul), dacă vizualizarea este de 500 px sau mai mică, intenționăm să afișăm imaginea la o lățime de 250 px. Dacă fereastra de vizualizare este mai largă decât aceasta, afișați imaginea la o lățime de 500 px.

    Asta s-ar potrivi cu CSS astfel:

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

    Pe un ecran de 1x, veți obține întotdeauna imaginea de 320w (mică) atunci când vizualizarea are o lățime de 500 px sau mai mică și veți primi întotdeauna imaginea de 640w (medie) atunci când vizualizarea este mai mare. Nu veți obține niciodată imaginea mare, deoarece vă poate spune că nu veți avea nevoie niciodată de atât de mulți pixeli.

    Ecran Ona 2x, veți obține întotdeauna imaginea de 640w (medie) atunci când vizualizarea are o lățime de 500 px sau mai mică (deoarece crede că are nevoie de 500 px de pixeli, iar micul nu este suficient la 320 px) și veți obține întotdeauna Imagine 1280w (mare) atunci când vizualizarea este mai mare. Nu veți obține niciodată imaginea mică, deoarece nu sunt niciodată suficienți pixeli pentru a acoperi ceea ce i-ați spus că intenționați să redați imaginea.

    Dimensiunea reală

    Amintiți-vă că dimensiunea reală a imaginii este încă la latitudinea dvs. Aș crede că, în majoritatea cazurilor, tu o faci prin CSS. Și CSS câștigă întotdeauna. Ceea ce declarați acolo va fi lățimea redată a imaginii, indiferent de ce se întâmplă cu srcsetși sizes. Asta doar rezolvă ce imagine va fi afișată.

    Acesta este ceea ce face ca mărimea să fie puțin dură. Să presupunem că aveți ceva de genul:

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

    Nu este deloc neobișnuit. Deci, ce dimensiune folosiți în sizesatribut? Aceasta ar fi 13,33% (înmulțiți-le pe toate împreună), deoarece acest număr trebuie să fie relativ la fereastra de vizualizare, nu la container. Și asta nu ține cont de margini, de umplutură și de lucrurile de pe aceste containere, deci este un fel de presupunere. Bănuiesc că numărătoarea apropiată în potcoavele, grenadele de mână și atributul mărimilor.

    Atunci să presupunem că apare o interogare media și corpul devine de fapt lățime de 75% pe lângă toate acestea. Trebuie să știți acest lucru, astfel încât să puteți ajusta ceea ce credeți că va fi dimensiunea redată a imaginilor. Atributul dimensiunilor dvs. poate deveni:

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

    Apoi, revedeți-o din nou pentru fiecare interogare media pe care o aveți, care afectează imaginile de conținut. Poate deveni puțin complex.

    Dimensiuni practice?

    Bănuiesc că majoritatea utilizărilor din lumea reală vor folosi ceva de genul:

    Presupunând că imaginile de conținut vor avea aproximativ jumătate din dimensiunea ferestrei browserului pe ecrane mari și dimensiunea completă a ferestrei browserului pe ecrane mici - lasă doar punctele de întrerupere să se întâmple acolo unde se întâmplă. Veți obține în continuare o alegere destul de decentă în acest fel, fără a scăpa de potrivirea exactă a tuturor interogărilor dvs. media.

    Și amintiți-vă că acestea sunt imagini de conținut. HTML tinde să dureze mai mult decât CSS sau JS, mai ales atunci când este conținut.

    Alte lucruri de știut

    De asemenea, puteți specifica dacă o imagine este 2x sau 1x cu srcset. Deci, un caz de utilizare foarte simplu poate fi:

    Numai asta este destul de util. Nu-l amestecați cu specificarea lățimilor. După cum spune Eric Portis:

    Și din nou, permiteți-mi să subliniez că, deși puteți atașa descriptori de rezoluție 1x / 2x la surse în srcsetloc de wdescriptori, 1x / 2x & w nu se amestecă. Nu le folosiți pe amândouă la fel srcset. Într-adevăr.

    Și îți amintești când am spus că imaginea originală a fost ușoară? Noul poate fi atât de ușor, dar elementele din interior susțin srcsetși sizes. Asta înseamnă că poți deveni foarte specific. Se adaugă un alt strat:

    1. Tu decizi care

      Link-uri

      • Articolul lui Martin Wolf care a inspirat acest lucru
      • Picturefill este poliamplatul pe care doriți să îl utilizați.
      • Articolul Smashing Magazine despre Picturefill 2.0 de Tim Wright
      • Eric Portis despre motivul pentru care Srcset și dimensiunile există și ce soluționează mai bine decât interogările media
      • Eric Portis cu mai multe despre nou

      Vezi caseta de testare Pen & srcset & dimensions de Chris Coyier (@chriscoyier) pe CodePen.