Propriedade max-width

A propriedade max-width define a largura máxima de um elemento. Os valores para esta propriedade podem ser quaisquer unidades de tamanho ou a palavra-chave none, que indica a ausência de um valor.

Geralmente, a propriedade é definida para um elemento com largura fluida (a largura é definida em porcentagem ou não é definida, e o elemento se expande em largura pelo seu conteúdo). Se a largura do elemento for definida em porcentagem - ao aumentar a janela do navegador, ela aumentará até atingir o valor de max-width.

Sintaxe

seletor {
	max-width: valor;
}

Exemplo

Neste exemplo, a largura é uma porcentagem da largura do elemento pai. Aumente a janela do navegador horizontalmente, e o contêiner também aumentará para se ajustar à largura da janela do navegador. No entanto, ele só aumentará até o valor definido em max-width, que é 900px. Quando o contêiner atingir essa largura - ele parará de aumentar:

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

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

Exemplo

Neste exemplo, a largura do contêiner é limitada em ambos os lados: ele não poderá ficar maior que 900px e menor que 400px:

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

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

Veja também

a propriedade min-width,
que define a largura mínima de um elemento
a propriedade max-height,
que define a altura máxima de um elemento
a propriedade min-height,
que define a altura mínima de um elemento