MP Web Studio
CSS100 din 100 disponibile
79 / 100

LECȚIA 79 DIN 100

Schimbă încadrarea cu picture

Folosește o imagine apropiată pe mobil și păstrează alternativa largă în img.

Sursă oficialăWHATWG HTML — picture and art directionRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

Elementul picture grupează surse alternative. Browserul verifică elementele source în ordine și folosește primul media potrivit; elementul img rămâne obligatoriu ca imagine și alternativă implicită.

Exemplu corect
<picture><source media="(max-width: 640px)" srcset="echipa-aproape.jpg"><img src="echipa-larga.jpg" alt="Echipa MP Web Studio"></picture>

Telefonul primește o încadrare care păstrează subiectul vizibil, iar ecranul larg folosește fotografia completă.

Greșeală frecventă
<picture><source media="(max-width: 640px)" srcset="aproape.jpg"></picture>

Fără img, structura nu are imaginea de rezervă obligatorie și nici text alternativ.

PASUL 2 · APLICĂ

Exercițiul tău

În picture, completează source pentru maximum 640px și păstrează img cu src și alt.

PASUL 3 · CONSTRUIEȘTE

Scrie și vezi rezultatul

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
  • Elementul source are condiția media cerută.
  • Sursa mobilă are un srcset nenul.
  • Imaginea de rezervă are src.
  • Imaginea de rezervă are alt.
  • Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării

source declară varianta condiționată, iar img furnizează conținutul implicit și descrierea accesibilă.