max-width
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Die max-width CSS Eigenschaft legt die maximale Breite eines Elements fest. Sie verhindert, dass der verwendete Wert der width-Eigenschaft größer wird als der durch max-width angegebene Wert.
Probieren Sie es aus
max-width: 150px; max-width: 20em; max-width: 75%; max-width: 20ch; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> Change the maximum width. </div> </section> #example-element { display: flex; flex-direction: column; background-color: #5b6dcd; height: 80%; justify-content: center; color: white; } max-width überschreibt width, aber min-width überschreibt max-width.
Syntax
/* <length> value */ max-width: 3.5em; max-width: anchor-size(--my-anchor inline, 245px); max-width: calc(anchor-size(width) + 4em); /* <percentage> value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fit-content(20em); max-width: stretch; /* Global values */ max-width: inherit; max-width: initial; max-width: revert; max-width: revert-layer; max-width: unset; Werte
<length>-
Definiert die
max-widthals absoluten Wert. <percentage>-
Definiert die
max-widthals Prozentsatz der Breite des umgebenden Blocks. none-
Keine Größenbeschränkung der Box.
max-content-
Die intrinsische bevorzugte
max-width. min-content-
Die intrinsische minimale
max-width. fit-content-
Nutzt den verfügbaren Platz, aber nicht mehr als max-content, d.h.
min(max-content, max(min-content, stretch)). fit-content(<length-percentage>)-
Verwendet die
fit-content-Formel mit dem angegebenen Argument anstelle des verfügbaren Raums, d.h.min(max-content, max(min-content, argument)). stretch-
Begrenzt die maximale Breite der margin box des Elements auf die Breite seines Containerelements. Es versucht, die Margin-Box den verfügbaren Platz im Containerelement ausfüllen zu lassen, verhält sich also in gewisser Weise ähnlich wie
100%, jedoch wird die resultierende Größe auf die Margin-Box anstatt auf die Box angewendet, die durch box-sizing bestimmt wird.Hinweis: Um Aliase zu überprüfen, die von Browsern für den
stretch-Wert verwendet werden, und um den Implementierungsstatus zu sehen, lesen Sie den Abschnitt Browser-Kompatibilität.
Barrierefreiheit
Stellen Sie sicher, dass Elemente, die mit einer max-width versehen sind, nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen |
| Vererbt | Nein |
| Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
| Berechneter Wert | der Prozentwert wie angegeben oder die absolute Länge oder none |
| Animationstyp | Längenangabe, Prozentsatz oder calc(); |
Formale Syntax
max-width =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()> |
stretch |
fit-content |
contain
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Beispiele
Maximale Breite in Pixeln festlegen
In diesem Beispiel wird das "child" entweder 150 Pixel breit sein oder die Breite des "parent", je nachdem, was kleiner ist.
HTML
<div id="parent"> <div id="child"> Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. </div> </div> CSS
#parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: 150px; } Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Box Sizing Module Level 4 # sizing-values |