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

cssselektor {
  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ć:

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

css#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:

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

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

Результат:

Zobacz też