<img src="hero-960.jpg" srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1440.jpg 1440w" sizes="(max-width: 640px) 100vw, 50vw" alt="Echipă la lucru">Pe ecrane înguste imaginea ocupă viewportul, iar în layoutul larg ocupă aproximativ jumătate.
LECȚIA 78 DIN 100
Descrie lățimile imaginilor candidate
Oferă trei lățimi reale și informează browserul cât spațiu va ocupa imaginea.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Descriptorii w indică lățimea intrinsecă a fiecărui candidat. Când sunt folosiți, sizes descrie dimensiunea de afișare, iar browserul poate alege resursa înainte de a descărca imaginea.
<img srcset="hero-480.jpg 480w, hero-960.jpg 960w" alt="Echipă">Cu descriptori w, omiterea sizes face browserul să presupună implicit 100vw, ceea ce poate produce o alegere mai mare decât este necesar.
PASUL 2 · APLICĂ
Exercițiul tău
Adaugă trei candidați cu 480w, 960w și 1440w și un sizes cu o condiție pentru maximum 640px plus valoarea finală 50vw.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○srcset conține lățimile 480w, 960w și 1440w, valide și unice.
- ○sizes conține o condiție media și o dimensiune finală validă.
- ○Imaginea are text alternativ.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Descriptorii unici descriu fișierele, iar lista sizes descrie spațiul estimat în două situații de layout.