max-width
Ustala maksymalną szerokość, powyżej której element się nie rozciągnie.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- wszystkie elementy poza liniowymi niezastępowanymi (np. `<span>`), wierszami i grupami wierszy tabel
- JavaScript
element.style.maxWidth = "65ch"
Przykład
#.container {
max-width: 480px;
margin-inline: auto;
}
img {
max-width: 100%;
height: auto;
}<div class="container stage">
<img src="/collections/covers/kurs-html-css-od-podstaw.webp" alt="" width="1536" height="1024">
</div>Definicja i zastosowanie
#Właściwość max-width ogranicza szerokość od góry. Element może być węższy, jeśli brakuje miejsca, ale nigdy nie przekroczy podanej wartości. To jedna z najważniejszych właściwości w projektowaniu responsywnym.
Klasyczne zastosowania to kontener strony (max-width: 1200px; margin: 0 auto;), wygodna długość linii tekstu (max-width: 65ch) i obrazy, które nie mogą wyjść poza rodzica (max-width: 100%).
Jeśli max-width jest mniejsze niż width, wygrywa max-width. A gdy kłóci się z min-width, wygrywa min-width.
Składnia
#max-width: none | <długość> | <procent> | min-content | max-content | fit-content;Wartości
#Wartości w praktyce
#none
.demo { max-width: none; }260px
.demo { max-width: 260px; }30ch
ch to szerokość cyfry 0..demo { max-width: 30ch; }60%
.demo { max-width: 60%; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dodaj
img { max-width: 100%; height: auto; }do każdego projektu. Obrazy nie wyjdą wtedy poza ekran telefonu. - Dla tekstu celuj w 60–75 znaków w linii, na przykład
max-width: 65ch.
Powiązane hasła
#- widthUstawia szerokość elementu.
- min-widthUstala minimalną szerokość, poniżej której element się nie zwęży.
- marginUstawia zewnętrzny odstęp elementu od sąsiadów.
- max-heightUstala maksymalną wysokość elementu.
- min()Wybiera najmniejszą z podanych wartości. Działa jak górny limit, np. szerokość 100% rodzica, ale nie więcej niż 600px.
Widzisz błąd albo brakuje przykładu? Napisz do nas.