Właściwość max-width

Właściwość max-width ustawia maksymalną szerokość elementu. Wartościami właściwości są dowolne jednostki wymiarów lub słowo kluczowe none, oznaczające brak wartości.

Zazwyczaj właściwość jest ustawiana dla elementu o płynnej szerokości (szerokość podana w procentach lub wcale nieustawiona, a element rozszerza się na szerokość swoją zawartością). Jeśli szerokość elementu jest podana w procentach - przy zwiększaniu okna przeglądarki będzie się zwiększać, aż osiągnie wartość max-width.

Składnia

selektor {
	max-width: wartość;
}

Przykład

W tym przykładzie szerokość wynosi procent szerokości rodzica. Zwiększ okno przeglądarki na szerokość, a kontener również się zwiększy, dostosowując się do szerokości okna przeglądarki. Jednak będzie się zwiększał tylko do wielkości określonej w max-width, czyli 900px. Gdy kontener osiągnie tę szerokość - przestanie się zwiększać:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	height: 300px;
	border: 1px solid black;
}

Przykład

W tym przykładzie szerokość kontenera jest ograniczona z obu stron: nie będzie mógł stać się większy niż 900px i mniejszy niż 400px:

<div id="elem"></div>

#elem {
	width: 70%;
	max-width: 900px;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Zobacz też

właściwość min-width,
która ustawia minimalną szerokość elementu
właściwość max-height,
która ustawia maksymalną wysokość elementu
właściwość min-height,
która ustawia minimalną wysokość elementu