25.09.2021 00:27
1
Ahoj,

Učím se pracovat s responzivními obrázky a není mi jasná jedna věc.

Když mám třeba

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="">
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.

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
25.09.2021 09:44
2
Původně odeslal Martin Kejzlar
... čeho se týká podmínka max-width v parametru sizes ...
No, tyhle veci jsou docela osemetne ...
- jednoduse receno, urcuje velikost obrazku vzhledem k plose v layoutu (ktery je pokazde jiny)

Se sirkou displeje to nema nic spolecneho, vzdy se pocita se sirkou okna.

Tady je to pekne rozepsane: https://www.vzhurudolu.cz/prirucka/srcset-sizes