# 133: Zjišťování responzivních obrázků - Triky CSS

Pravděpodobně jsem trochu vzácný v tom, že mě spíše bavilo snažit se držet krok s věcmi reagujících obrázků. Je to zajímavý problém, který přinesl spoustu zajímavých řešení. Celá věc se nyní začíná končit, nyní, když jsou oficiální řešení:

1. a přátelé
2. 

   Řekněme, že jsme na obrazovce 1x. Protože jsme prohlížeči řekli, že budeme tyto obrázky používat tak velké, jak jen dokážeme (100% výřezu), k „hraničním bodům“, kdy prohlížeč obrázky vyklopí, dojde ve 1280px, 640px, a 320 pixelů, stejné přesné velikosti, jaké jsme řekli, že obrázky jsou.

   Pokud jsme na obrazovce 2x, tyto „zarážky“ se sníží na polovinu (bez ohledu na to, co vlastně děláme, abychom tyto obrázky zmenšili) a budou na 640px, 320px a 160px.

   Řekněme, že používáme stejné obrázky, ale o rozvržení stránky víme mnohem víc a použili jsme něco podobného:

   Tady říkáme (s sizesatributem), že pokud je výřez 500px nebo menší, máme v úmyslu zobrazit obraz v šířce 250px. Pokud je výřez širší, zobrazte obraz v šířce 500px.

   To by se shodovalo s CSS takto:

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

   Na obrazovce 1x získáte vždy 320w (malý) obraz, pokud je výřez široký 500px nebo menší, a vždy získáte 640w (střední) obraz, když je výřez větší. Velký obrázek nikdy nezískáte, protože vám může říci, že nikdy nebudete potřebovat tolik pixelů.

   Obrazovka Ona 2x, vždy získáte obraz 640w (střední), pokud je výřez široký 500px nebo menší (protože si myslí, že potřebuje 500px pixelů a malý při 320px nestačí), 1280 W (velký) obraz, když je výřez větší. Malý obrázek nikdy nezískáte, protože nikdy nestačí na pokrytí toho, co jste mu řekli, že ho chcete vykreslit.

   Skutečná velikost

   Pamatujte, že skutečná velikost obrázku je stále na vás. Myslím, že ve většině případů to děláte prostřednictvím CSS. A CSS vždy vyhrává. To, co prohlásíte, bude vykreslená šířka obrázku bez ohledu na to, co se stane s srcseta sizestak. Tím se pouze vyřeší, který obrázek se zobrazí.

   Díky tomu je atribut velikosti trochu tvrdý. Řekněme, že máte něco jako:

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

   To není vůbec neobvyklé. Jakou velikost tedy nyní v sizesatributu používáte ? To by bylo 13,33% (vynásobte je všechny dohromady), protože toto číslo musí být relativní k výřezu, nikoli ke kontejneru. A to nebere v úvahu okraje a polstrování a věci na těchto kontejnerech, takže je to jen dohad. Myslím, že se to blíží počtu podkov, ručních granátů a atributu velikosti.

   Pak řekněme, že přijde mediální dotaz a tělo se navíc k tomu všemu zvětší o 75%. Musíte to vědět, abyste mohli upravit to, co si myslíte, že vykreslená velikost obrázků bude. Váš atribut velikosti se může stát:

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

   Pak to projděte znovu pro každý dotaz na rozložení médií, který má vliv na obrázky obsahu. Může to být trochu složité.

   Praktické velikosti?

   Mám podezření, že většina použití v reálném světě bude používat něco jako:

   Za předpokladu, že obrázky obsahu budou přibližně na polovině velikosti okna prohlížeče na velkých obrazovkách a plné velikosti okna prohlížeče na malých obrazovkách - nechte zarážky nastat tam, kde k nim dojde. Tímto způsobem získáte docela slušnou volbu, aniž byste se museli otravovat a přesně odpovídat všem vašim mediálním dotazům.

   A pamatujte, že toto jsou obrázky obsahu. HTML má tendenci trvat déle než CSS nebo JS, zvláště když je jeho obsah.

   Další věci, které byste měli vědět

   Pomocí srcset můžete také určit, zda je obrázek 2x nebo 1x. Opravdu jednoduchý případ použití může být:

   To samo o sobě je docela užitečné. Nemíchejte to s určením šířky. Jak říká Eric Portis:

   A znovu mi dovolte zdůraznit, že zatímco ke zdrojům můžete připojit deskriptory rozlišení 1x / 2x srcsetmísto wdeskriptorů, 1x / 2x & w se nemíchají. Nepoužívejte oba současně srcset. Opravdu.

   A pamatujete si, když jsem řekl, že původní obrázek byl snadný? Nový může být tak snadný, ale prvky uvnitř také podporují srcseta sizes. To znamená, že můžete být velmi konkrétní. Přidává k tomu další vrstvu:

   1. Vy rozhodnete, které

      Odkazy

      • Článek Martina Wolfa, který to inspiroval
      • Picturefill je polyfill, který chcete používat.
      • Smashing Magazine článek o Picturefill 2.0 od Tima Wrighta
      • Eric Portis o tom, proč Srcset a velikosti existují a co řeší lépe než mediální dotazy
      • Eric Portis s více o novém

      Podívejte se na testovací pero srcset a velikosti Chrisa Coyiera (@chriscoyier) na CodePen.