Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
max-width do CSS estabelece a largura máxima de um elemento. Ele previne o valor usado da propriedade width de se tornar maior que o valor indicado pelo 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 substitui max-width.
Sintaxe
/* <length> value */ max-width: 3.5em; /* <percentage> value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fill-available; /* Global values */ max-width: inherit; max-width: initial; max-width: unset;
Valores
<length>- A largura máxima, expressada como
<length>. <percentage>- A largura máxima, expressada como
<percentage>da largura contida do bloco.
Keyword values
none- A largura não possui valor máximo. (padrão)
max-content- A largura intríseca preferida.
min-content- A largura intríseca mínima preferida.
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
<length> | <percentage> | none | max-content | min-content | fit-content | fill-available
Exemplos
Neste exemplo, a cada "child" terá 150 pixels de largura ou comprimento do "parent," não importa qual é menor:
<div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: 150px;
}
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.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Especificações
| Especificação | Status | Comentário |
|---|---|---|
| CSS Intrinsic & Extrinsic 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 |
| Midia | visual |
| Computed value | the percentage as specified or the absolute length or none |
| Animation type | a length, percentage or calc(); |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Compatibilidade com navegador
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | 12 | 11 | 7 | 42 | 2 |
fit-content, max-content, and min-content | No3 | No | 3 -moz- 4 | No | No | No5 |
fill-available | No | No | No | No | No | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | Yes | ? | ? | ? | ? |
fit-content, max-content, and min-content | ? | ? | ? | No | ? | ? | No |
fill-available | ? | ? | ? | ? | ? | ? | No |
1. CSS 2.1 leaves the behavior of max-width with table undefined. Firefox supports applying max-width to table elements.
2. CSS 2.1 leaves the behavior of max-width with table undefined. Opera supports applying max-width to table elements.
3. Chrome implements an earlier proposal for setting width to an intrinsic width: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for fill-available or fit-content.
4. Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
5. Safari implements an earlier proposal for setting width to an intrinsic width: the keywords intrinsic (instead of max-content), and min-intrinsic (instead of min-content). There is no equivalent for fill-available or fit-content.