Propriedade CSS max-width

A propriedade CSS max-width define a largura máxima que um elemento pode atingir. O elemento pode ser mais estreito que esse valor, mas nunca crescerá além dele, independentemente do conteúdo que contém ou do tamanho de seu contêiner.

Isso faz do max-width a base dos layouts responsivos: em vez de fixar um elemento em uma largura, você o deixa encolher livremente em telas pequenas enquanto o limita nas telas grandes.

Como max-width interage com width

É útil pensar em três propriedades funcionando juntas:

max-width impede que o valor utilizado de width se torne maior que o valor especificado. Se width resolver para mais que max-width, o elemento é reduzido para max-width.
min-width impede que o elemento fique menor que seu valor, e vence qualquer conflito — min-width substitui max-width. Portanto, se min-width for maior que max-width, o elemento usa min-width.

Em resumo, a ordem de resolução é: min-width prevalece sobre max-width, e max-width prevalece sobre width.

Um padrão comum no mundo real é uma "coluna de conteúdo centralizada" que preenche viewports estreitos, mas para de alargar quando a leitura fica confortável:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Em um celular, o contêiner tem largura total; após 1200px, permanece em 1200px e as margens automáticas o mantêm centralizado.

Valor Inicial	none
Aplicável a	Todos os elementos, exceto elementos inline não substituídos, linhas de tabela e grupos de linhas.
Herdado	Não.
Animável	Sim. Width é animável.
Versão	CSS2
Sintaxe DOM	object.style.maxWidth = "500px";

Sintaxe

Sintaxe da Propriedade CSS max-width

max-width: none | length | percentage | initial | inherit;

Uma percentage é resolvida em relação à largura do bloco contenedor do elemento. Um length (como px, em, rem, ch) é um limite fixo absoluto ou relativo. O padrão, none, significa "sem máximo".

Exemplo da propriedade max-width:

Exemplo da Propriedade CSS max-width com valor em %

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade max-width definida como "px" e "em":

Exemplo da Propriedade CSS max-width com valores em px e em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>

Experimente Você Mesmo »

Imagens responsivas com max-width

Um uso clássico de max-width é fazer imagens reduzirem em telas pequenas sem nunca exceder seu tamanho natural:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% permite que a imagem encolha para caber em um contêiner estreito, enquanto height: auto mantém a proporção intacta. Como não há width fixo, a imagem nunca aumenta além de sua resolução intrínseca.

max-width vs box-sizing

Por padrão (box-sizing: content-box), max-width limita apenas a área de conteúdo — padding e borda são adicionados por cima, então a caixa visível pode acabar sendo mais larga que max-width. Se você quiser que max-width inclua padding e borda, defina box-sizing: border-box:

.card {
  max-width: 400px;
  padding: 20px;
  box-sizing: border-box; /* total rendered width never exceeds 400px */
}

Valores

Valor	Descrição
`none`	Sem largura máxima. Este é o valor padrão.
`length`	Uma largura máxima fixa em `px`, `em`, `rem`, `ch`, etc. Valores negativos são inválidos.
`%`	Uma largura máxima como percentagem da largura do bloco contenedor.
`initial`	Define a propriedade para seu valor padrão (`none`).
`inherit`	Herda o valor do elemento pai.

Propriedades relacionadas

min-width — define o limite inferior; substitui max-width.
width — a largura preferida, limitada por max-width.
max-height / min-height — os equivalentes verticais.

Prática

O que a propriedade CSS max-width faz?

Ela impede que o valor utilizado da propriedade width se torne maior que o valor especificado por max-width.Ela aumenta a largura de um elemento ao valor máximoEla define uma largura mínima para um elementoEla limita a largura máxima dos elementos filhos dentro de um contêiner pai.Ela aumenta o padding dentro de um elemento.