.responsive-image { display: block; max-width: 100%; height: auto; }Imaginea mare se micșorează pe mobil, dar nu este întinsă inutil peste dimensiunea sa.
LECȚIA 75 DIN 100
Păstrează imaginea în container
Împiedică imaginea să depășească lățimea disponibilă și păstrează proporțiile.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
max-width: 100% limitează lățimea folosită la container, iar height: auto lasă browserul să calculeze înălțimea din raportul intrinsec. display: block elimină spațiul de bază rezervat elementelor inline.
.responsive-image { width: 1200px; height: 400px; }Dimensiunile fixe pot crea overflow și pot deforma imaginea.
PASUL 2 · APLICĂ
Exercițiul tău
Setează display: block, max-width: 100% și height: auto.
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
- ○Imaginea este element block.
- ○Lățimea maximă este 100%.
- ○Înălțimea rămâne automată.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Limita procentuală răspunde containerului, iar dimensiunea automată păstrează raportul intrinsec.