.card-image { width: 100%; height: 240px; object-fit: cover; }Toate cardurile primesc o zonă vizuală egală, fără întinderea fotografiei.
LECȚIA 76 DIN 100
Umple un cadru cu object-fit
Umple un cadru de card fără să deformezi fotografia.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
object-fit controlează cum este redimensionat conținutul unei imagini în cutia sa. cover păstrează raportul și acoperă cadrul, decupând marginile care nu încap.
.card-image { width: 100%; height: 240px; }Fără object-fit, dimensiunile impuse pot schimba raportul vizual al imaginii.
PASUL 2 · APLICĂ
Exercițiul tău
Setează lățimea la 100%, înălțimea la 240px și object-fit la cover.
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 folosește toată lățimea cadrului.
- ○Cadrul are înălțimea de 240px.
- ○Conținutul folosește object-fit: cover.
- ○Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării
Cutia primește dimensiuni explicite, iar cover adaptează conținutul păstrând raportul.