max-width
max-width
do CSS estabelece a largura máxima de um elemento. Ele evita que o valor usado da propriedade width
se torne maior que o valor especificado por max-width
.O código dos exemplos interativos está armazenado em um repositório GitHub. Se você gostaria de contribuir com o projeto exemplos interativos, por favor clone https://github.com/mdn/interactive-examples e nos envie um pull request.
max-width
substitui width
, mas min-width
(en-US) substitui max-width
.
Sintaxe
/* <length> valor */
max-width: 3.5em;
/* <porcentagem> valor */
max-width: 75%;
/* Valores de keyword */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* Valores Globais */
max-width: inherit;
max-width: initial;
max-width: unset;
Valores
<length>
(en-US)- Define a
max-width
como um valor absoluto. <percentage>
(en-US)- Define a
max-width
como uma porcentagem da largura do bloco que o contém.
Valores Keyword
none
- A largura não possui valor máximo. (padrão)
max-content
- A
max-width
intrínseca preferida. min-content
- O mínimo
max-width
intrínseco. fit-content(
<length-percentage>
(en-US))- Use a fórmula
fit-content
com o espaço disponível substituído pelo argumento especificado, i.e.min(max-content, max(min-content, argumento)).
Preocupações de Acessibilidade
Certifique-se que os elementos definidos com max-width
não sejam truncados e/ou não obscureçam outros conteúdos quando a página for ampliada para aumentar o tamanho do texto.
fill-available
- A largura contida do bloco sem o margin, border e padding horizontal. (Note que alguns navegadores implementaram um nome antigo para essa keyword,
available
.) fit-content
- O mesmo que
max-content.
Sintaxe formal
none | (en-US) <length-percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)where
<length-percentage> = <length> (en-US) | (en-US) <percentage> (en-US)
Exemplos
Definindo a largura máxima em pixels
Neste exemplo, o "filho" terá 150 pixels de largura ou a largura do "pai", o que for menor:
<div id="pai">
<div id="filho">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
#pai {
background: lightblue;
width: 300px;
}
#filho {
background: gold;
width: 100%;
max-width: 150px;
}
Resultado
O valor de fit-content
pode ser usado para atribuir o comprimento de um elemento no tamanho intrínseco necessário pelo seu conteúdo:
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
}
Preocupações de acessibilidade
Garantir que os elementos atribuidos com max-width
não estejam cortados e/ou não obscureça outro conteúdo quando a página é ampliada para aumentar o tamanho do texto.
Especificações
Especificação | Status | Comentário |
---|---|---|
CSS Box Sizing Module Level 3 The definition of 'max-width' in that specification. |
Rascunho atual | Adiciona o max-content , min-content , fit-content , e fill-available keywords. (Ambos CSS3 Box e CSS3 Writing Modes são rascunhos usados para definir essas keywords, mas foram substituídas por essa especificação.) |
CSS Transitions The definition of 'max-width' in that specification. |
Rascunho atual | Define max-width como animável. |
CSS Level 2 (Revision 1) The definition of 'max-width' in that specification. |
Recomendação | Definição inicial. |
Initial value | none |
---|---|
Aplica-se a | all elements but non-replaced inline elements, table rows, and row groups |
Inherited | não |
Percentages | refer to the width of the containing block |
Computed value | the percentage as specified or the absolute length or none |
Animation type | a length, percentage or calc(); |
Compatibilidade com navegador
BCD tables only load in the browser