Înălțime/Lățime Minimă/Maximă în CSS
Patru proprietăți pun limite dimensiunii unui element. Lățimea este limitată de min-width (cea mai mică) și max-width (cea mai mare), iar înălțimea, în același mod, de min-height (cea mai mică) și max-height (cea mai mare).
Utilizarea max-width în CSS
Cu max-width, stabilești cât de lat poate deveni un element: nu va crește peste valoarea pe care o dai.
Valori acceptate:
- o lungime — limita în
px,cmși așa mai departe. - un procent — limita relativă la blocul care conține elementul.
none— nicio limită, aceasta fiind valoarea implicită.
Simplul width creează probleme într-o fereastră de browser mai mică decât elementul, deoarece apare o bară de derulare orizontală. max-width se descurcă mai bine cu ferestrele mici.
Exemple pentru max-width în CSS
Cele două div-uri se comportă diferit odată ce fereastra browserului este mai îngustă de 500px, așa că încearcă să o micșorezi.
Notă: Când un element are atât width, cât și max-width, iar width este mai mare, se aplică max-width.
max-width versus width
O fereastră îngustă face ca div-ul cu max-width să se micșoreze pentru a încăpea. Div-ul cu width fix rămâne așa cum este.
<style> intern, creați o clasă .div1 cu max-width 500px și un fundal powderblue, și o clasă .div2 cu width 500px și un fundal powderblue. Adăugați un div din fiecare clasă cu text. Pe o fereastră îngustă, div-ul cu max-width se micșorează, în timp ce div-ul cu lățime fixă își păstrează dimensiunea.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="div1">This element has a max-width of 500 pixels.</div>
<br>
<div class="div2">This element has a width of 500 pixels.</div>
</body>
</html>
width și max-width împreună
La o lățime de 100%, div-ul umple containerul, până la o limită de 900px.
<style> intern, dați unei clase .div1 width 100% și max-width 900px, cu un fundal powderblue. Elementul crește pentru a umple containerul, dar nu depășește niciodată 900px. Adăugați un div cu text.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div1 {
width: 100%;
max-width: 900px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="div1">This element has a width of 100% but never grows wider than 900px.</div>
</body>
</html>
Toate Proprietățile CSS pentru Dimensiuni
Proprietățile pentru dimensiuni, pe scurt:
height— cât de înalt este un element.max-height— cea mai mare înălțime permisă.max-width— cea mai mare lățime permisă.min-height— cea mai mică înălțime permisă.min-width— cea mai mică lățime permisă.width— cât de lat este un element.