<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" alt="MP Web Studio" width="180" height="60">Ecranul standard poate folosi 1x, iar unul cu densitate mare poate alege 2x.
LECȚIA 77 DIN 100
Oferă imagini pentru densități diferite
Permite browserului să aleagă varianta 1x sau 2x a aceluiași logo.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Atributul srcset poate lista candidați cu descriptori de densitate x. Browserul combină acești candidați cu densitatea dispozitivului și alege resursa potrivită; src rămâne alternativa de bază.
<img srcset="logo.png, logo@2x.png" alt="MP Web Studio">Fără descriptori, lista nu exprimă diferența de densitate cerută.
PASUL 2 · APLICĂ
Exercițiul tău
Completează srcset cu doi candidați unici, unul 1x și unul 2x; păstrează src, alt, width și height.
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 candidați 1x și 2x valizi și unici.
- ○Imaginea păstrează atributul src.
- ○Imaginea are text alternativ.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Fiecare URL are un descriptor pozitiv și unic; dimensiunile rezervă spațiul, iar alt descrie imaginea.