| Autor | Zpráva | ||
|---|---|---|---|
| Yuhů Profil |
#1 · Zasláno: 22. 2. 2017, 18:45:17
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 |
#3 · Zasláno: 23. 2. 2017, 00:28:01
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 |
#4 · Zasláno: 23. 2. 2017, 00:29:54
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 |
#5 · Zasláno: 23. 2. 2017, 01:34:25
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 |
||
|
Časová prodleva: 3 měsíce
|
|||
| Anonymouz Profil * |
#6 · Zasláno: 7. 6. 2017, 14:03:52
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. |
||
|
Časová prodleva: 7 let
|
|||
0