Construiește: o imagine adaptivă cu picture

Oferă o sursă alternativă și un img de rezervă în picture.

PASUL 1 · ÎNVAȚĂ

Cum funcționează

Oferă o sursă alternativă și un img de rezervă în picture. Structura semantică trebuie să descrie sensul, nu aspectul vizual.

Exemplu corect

<picture><source media="(min-width: 800px)" srcset="peisaj-larg.webp"><img src="peisaj.jpg" alt="Peisaj la apus"></picture>

picture permite browserului să aleagă o sursă potrivită. Elementul img rămâne obligatoriu ca variantă implicită și păstrează textul alternativ.

Greșeală frecventă

<picture><source srcset="peisaj-larg.webp"></picture>

Lipsește img de rezervă. Dacă sursa nu poate fi aleasă sau încărcată, picture nu mai oferă imaginea implicită și descrierea alt.

PASUL 2 · APLICĂ

Completează exemplul. Oferă o sursă alternativă și un img de rezervă în picture.

index.htmlHTML

Rezultat sigurizolat

Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate

PASUL 4 · VERIFICĂ

0%neverificat

Explică-mi logica rezolvării

Pune source înaintea imaginii și adaugă la final un img complet cu src și alt.