Ahoj,
Učím se pracovat s responzivními obrázky a není mi jasná jedna věc.
Když mám třeba
Jde mi o to, čeho se týká podmínka max-width v parametru sizes. Buďto jde o reálnou velikost plochy, kde bude obrázek zobrazen, nebo o velikost šířky dispeje? Asi by mělo jít o velikost displeje, když je to CSS podmínka, že? Takže když třeba vím, že je rozlišení displaje 600px na šířku, tak první podmínka (max-width: 200px) neprojde, druhá ano. Pokud by byl tedy v daném rozlišení obrázek přes celou šířku displeje, zvolil bych obrázek o šířce 879px. Teď mi jde hlavně o to, když by v daném rozlišení byl např. container layoutu o šířce třeba 600px a obrázek by se zobrazoval přes 50% daného containeru, tedy na šířce 300px, měl bych zvolit následující možné rozlišení, tedy v tomto případě 591px.Kód:<img sizes="(max-width: 200px) 200px, (max-width: 800px) 879px,, 700px" srcset=" dog_c_scale,w_200.jpg 200w, dog_c_scale,w_591.jpg 591w, dog_c_scale,w_879.jpg 879w, dog_c_scale,w_1056.jpg 1056w, dog_c_scale,w_1258.jpg 1258w, dog_c_scale,w_1352.jpg 1352w, dog_c_scale,w_1400.jpg 1400w" src="dog_c_scale,w_1400.jpg" alt="">
Je to tak, nebo to chápu blbě?
A rovnou se zeptám, neexistuje nějaké rozšíření do Chromu nebo jiného prohlížeče, které by přímo na webu jednoduše ukazovalo, který obrázek byl ve skutečnosti použit a třeba i rovnou renderovanou velikost obrázku?
Díky
Vývoj složitějších systémů na WordPressu
WEBINÁŘ - 11. 11. 2021
v 15:00
