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

cssseletor {
  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:

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

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

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

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

Результат:

Veja também