Autor Zpráva
Yuhů
Profil
Marně hledám informaci o podpoře atributu sizes u tagu img v prohlížečích. Příkladů kódu nacházím hodně, ale nefungují mi. Umíte někdo sizes rozběhat bez polyfillu?
TomášK
Profil
Zkusil jsem příklad od Martina Michálka, ve vlastní stránce bez polyfillu.


1) Firefox 53.0a2 (2017-02-09) (64-bit) sizes bere v potaz (edit: 52.0b7 se chová stejně)

- bez sizes vidím při zvětšování obrázky Small, Medium, Large
- se sizes vidím při zvětšování obrázky Small, Medium, Small (od 768+)
- velikost obrázku je pořád 200x200

Chová se to tak, jak bych čekal.

2) Chromium Version 56.0.2924.87 (64-bit) se chová divně

- při prvním zobrazení ve velkém okně se zobrazil Small
- při zmenšení přešel na Medium, a ten tam od té doby zůstal, i po refreshi a jákékoliv změně velikosti okna


Kód:

<h1>Responzivní obrázky: srcset</h1>

<p class="image">
  <img  srcset="http://www.vzhurudolu.cz/data/test/responsive-images/assets/small_600.png 600w, 
          http://www.vzhurudolu.cz/data/test/responsive-images/assets/medium_1024.png 1024w,
          http://www.vzhurudolu.cz/data/test/responsive-images/assets/large_1600.png 1600w"
  alt="Obrázek" width="200" height="200">
</p>

a s nimi:

<h1>Responzivní obrázky: srcset</h1>

<p class="image">
  <img  srcset="http://www.vzhurudolu.cz/data/test/responsive-images/assets/small_600.png 600w, 
          http://www.vzhurudolu.cz/data/test/responsive-images/assets/medium_1024.png 1024w,
          http://www.vzhurudolu.cz/data/test/responsive-images/assets/large_1600.png 1600w"
       sizes="(min-width: 768px) 300px, 100vw"
  alt="Obrázek" width="200" height="200">
</p>
Yuhů
Profil
Díky. Vtip byl v tom, že se musí použít srcset. Já to zkoušel normálně se src, ale to pak sizes nic nedělají.

Teď mi zbývá ještě pochopit, co znamená délka 100vw. Jasně, má to být sto procent šířky prohlížeče, ale obrázky se mi vykreslují mnohem mnohem menší. Mám tenhle zápis:

<img srcset="../images/1.png 2000w" sizes="100vw">

a obrázek se vykresluje asi v osminové šířce, než by měl (tedy 100 % šířky).
Yuhů
Profil
Aha, ona se ta jednotka vw odvozuje od deskriptoru u srcset. Když změním ten zápis 2000w na něco jiného, tak se mění rozměr.
Yuhů
Profil
hm, takže mi vyšlo tohle:

výsledná šířka obrázku = šířka viewportu * původní šířka obrázku * hodnota v sizes / použitý w deskriptor z srcset
Anonymouz
Profil *
K čemu přesně to má fungovat? To má být pouze na to, že se obrázek změní v jiném rozlišení?

Vyzkoušel jsem zkopírovat příklad odtud a mě se ty obrázky mění uplně jinak v mozzile uplně jinak v chromu a uplně jinak v edge. Přijde mi, že se na to nedá spolehnout. O pár vláken dole jsem narazil na <picture></picture> což mi funguje všude bezproblémově. Přidávám kód: Responzivní obrázky: srcset se sizes případně si z odkazu odmažte pomlčku.

Jinými slovy u řešení v tomto vlákně nevidím žádné změny na chrome, u řešení s picture vidím změny pokaždé tak jak mají být. Je nějaký důvod proč používat řešení z tohoto vlánka? Nerýpu, nechápu to, tak se ptám.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0