# 133: Otkrivanje responzivnih slika - CSS-trikovi

Anonim

Vjerojatno sam pomalo rijedak jer sam radije uživao pokušavajući držati korak s reaktivnim slikama. Zanimljiv je problem koji je iznjedrio mnoštvo zanimljivih rješenja. Sve se to ipak počinje završavati sada, sada kada su službena rješenja:

  1. i prijatelji

  2. Recimo da smo na 1x zaslonu. Budući da smo pregledniku rekli da ćemo te slike koristiti što je moguće veće (100% okvira za prikaz), "točke prekida" kada će preglednik preokrenuti slike dogodit će se pri 1280px, 640px, i 320px, istih točnih veličina kao što smo rekli i da su slike.

    Ako smo na 2x zaslonu, te će se "točke prijeloma" prepoloviti (bez obzira na to što zapravo radimo za veličinu tih slika) i bit će na 640px, 320px i 160px.

    Recimo da koristimo iste slike, ali znamo puno više o izgledu naše stranice i koristili smo nešto poput ovog:

    Ovdje kažemo (s sizesatributom), ako je okvir za prikaz 500 piksela ili manji, namjeravamo prikazati sliku širine 250 piksela. Ako je okvir za prikaz širi od toga, prikažite sliku širine 500 piksela.

    To bi se podudaralo s CSS-om poput ovog:

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

    Na 1x zaslonu uvijek ćete dobiti 320w (malu) sliku kad je okvir za prikaz širok ili manji od piksela, a uvijek ćete dobiti 640w (srednju) sliku kada je veći. Nikada nećete dobiti veliku sliku, jer ona može reći da vam nikada neće trebati toliko piksela.

    Na zaslonu 2x, uvijek ćete dobiti 640w (srednju) sliku kad je okvir za gledanje širok 500 piksela ili manji (jer smatra da mu treba 500 piksela, a mali nije dovoljan pri 320 piksela), a uvijek ćete dobiti 1280w (velika) slika kada je okvir za prikaz veći. Nikad nećete dobiti malu sliku, jer nikad nema dovoljno piksela da pokrije ono što ste joj rekli da namjeravate prikazati sliku.

    Stvarno dimenzioniranje

    Sjetite se da stvarna veličina slike još uvijek ovisi o vama. Mislim da u većini slučajeva to radite putem CSS-a. A CSS uvijek pobjeđuje. Ono što izjaviti da će biti donesena širina slike bez obzira što se događa s srcsette sizesstvari. To samo utvrđuje koja će slika biti prikazana.

    To je ono što atribut veličina čini malo teškim. Recimo da imate nešto poput:

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

    To uopće nije neobično. Dakle, koju veličinu koristite u sizesatributu? To bi bilo 13,33% (pomnožite ih sve zajedno) jer taj broj mora biti u odnosu na prikazni okvir, a ne na spremnik. A to ne uzima u obzir margine, popunjavanje i ostalo na tim spremnicima, pa je to neka vrsta pretpostavke. Pretpostavljam da se blisko računa u potkovicama, ručnim bombama i atributu veličine.

    Onda recimo da se pojavi medijski upit i tijelo zapravo postane široko 75% povrh svega toga. To morate znati kako biste mogli prilagoditi ono što mislite da će biti prikazana veličina slika. Atribut vaših veličina mogao bi postati:

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

    Zatim to ponovno pregledajte za svaki upit medija za izgled koji utječe na slike sadržaja. Može postati malo složeno.

    Praktične veličine?

    Pretpostavljam da će većina stvarnih slučajeva koristiti nešto poput:

    Pod pretpostavkom da će slike sadržaja biti približno upola manje veličine prozora preglednika na velikim zaslonima i pune veličine prozora preglednika na malim zaslonima - samo dopustite da se točke prijeloma dogode tamo gdje se dogode. Na ovaj ćete način i dalje dobiti prilično pristojan izbor, a da ne umanjite precizno podudaranje svih vaših medijskih upita.

    I zapamtite da su to slike sa sadržajem. HTML nastoji trajati dulje od CSS-a ili JS-a, posebno kada je sadržaj.

    Ostale stvari koje treba znati

    Također možete odrediti je li slika 2x ili 1x sa srcsetom. Tako stvarno jednostavan slučaj upotrebe može biti:

    Samo to je prilično korisno. Nemojte ga miješati s određivanjem širine. Kao što kaže Eric Portis:

    I opet dopustite mi da naglasim da, iako možete izvorima priložiti deskriptore 1x / 2x rezolucije srcsetumjesto wdeskriptora, 1x / 2x & w se ne miješaju. Nemojte koristiti oboje u istom srcset. Stvarno.

    I sjećate se kad sam rekao da je originalni ispun za slike jednostavan? Novo može biti tako jednostavno, ali elementi iznutra također podržavaju srcseti sizes. To znači da možete dobiti vrlo specifične. Ovome dodaje još jedan sloj:

    1. Vi odlučite koji

      Veze

      • Članak Martina Wolfa koji je ovo nadahnuo
      • Picturefill je polifil koji želite koristiti.
      • Članak Smashing Magazina na Picturefill 2.0, Tim Wright
      • Eric Portis o tome zašto Srcset i veličine postoje i što rješava bolje od medijskih upita
      • Eric Portis s više o novom

      Pogledajte testnu kutiju olovke i veličine Chrisa Coyiera (@chriscoyier) na CodePenu.