Ce face width și height (min/max)
Proprietățile width și height dictează mărimea cutiei unui element. În designul responsiv, combinarea lor cu min-width, max-width, min-height și max-height este vitală.
Folosirea max-width: 100% pe imagini garantează că acestea nu vor depăși niciodată lățimea ecranului pe telefon. Unitatea modernă vh (viewport height) permite setarea unei secțiuni pe toată înălțimea ecranului (min-height: 100vh).
Valori uzuale
| Valoare | Descriere |
|---|---|
auto |
Implicit: browserul calculează automat dimensiunea pe baza conținutului. |
px, rem, % |
Valori absolute sau relative la părinte. |
vw, vh |
Procente relative la dimensiunea ferestrei de vizualizare (viewport). |
min-content / max-content |
Dimensiuni intrinseci bazate pe cel mai lung cuvânt sau pe tot textul. |
Exemple
Exemplul 1: Hero section pe tot ecranul și imagini responsive
min-height: 100vh ocupă tot ecranul, iar max-width: 100% face imaginile adaptabile.
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img.responsiv {
max-width: 100%;
height: auto;
}Efect vizual în browser
Secțiunea hero ocupă cel puțin 100% din înălțimea ferestrei browserului, iar imaginea se scalează automat proporțional pe orice ecran.Greșeli frecvente
- Setarea de lățimi fixe în pixeli (ex. width: 1200px) pe containere; pe telefoane, acest lucru duce la o bară de derulare orizontală inestetică. Folosește max-width: 1200px și width: 100%.
- Setarea width sau height pe elemente pur inline (cum ar fi ); proprietățile de dimensiune sunt ignorate pe elemente inline dacă nu au display: inline-block sau block.
Comenzi înrudite
box-sizing: Stabilește dacă lățimea (width) și înălțimea (height) includ și spațierea interioară (padding) plus bordura (border).display (block, inline, inline-block, none): Stabilește tipul de cutie al elementului în fluxul paginii sau îl ascunde complet din document.margin: Creează spațiu gol în exteriorul bordurii unui element, distanțându-l de elementele vecine.