max-width CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Eigenschaft max-width legt die maximale Breite eines Elements fest. Sie verhindert, dass der verwendete Wert der Eigenschaft width größer wird als der durch max-width angegebene Wert.
max-width überschreibt width, aber min-width überschreibt max-width.
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;
}
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
max-widthals absoluten Wert. <percentage>-
Definiert
max-widthals Prozentsatz der Breite des enthaltenden Blocks. none-
Keine Begrenzung für die Größe der Box.
max-content-
Die intrinsisch bevorzugte
max-width. min-content-
Die intrinsische minimale
max-width. fit-content-
Verwendet 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, wobei der verfügbare Platz durch das angegebene Argument ersetzt wird, d.h.min(max-content, max(min-content, argument)). stretch-
Begrenzt die maximale Breite der Margin-Box des Elements auf die Breite seines enthaltenden Blocks. Es versucht, die Margin-Box den verfügbaren Platz im enthaltenden Block ausfüllen zu lassen und verhält sich damit in gewisser Weise ähnlich wie
100%, wendet die resultierende Größe jedoch auf die Margin-Box statt auf die durch box-sizing bestimmte Box an.Hinweis: Informationen zu den von Browsern für den Wert
stretchverwendeten Aliassen und zu seinem Implementierungsstatus finden Sie im Abschnitt Browser-Kompatibilität.
Barrierefreiheit
Stellen Sie sicher, dass Elemente mit festgelegtem max-width nicht abgeschnitten werden und/oder keine anderen Inhalte verdecken, wenn die Seite gezoomt 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 |
<box-size> |
<anchor-size()> |
contain |
fit-content( <length-percentage [0,∞]> )
<box-size> =
<length-percentage> |
stretch |
contain |
min-content |
max-content |
fit-content |
fit-content( ) |
calc-size( )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<length-percentage> =
<length> |
<percentage>
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Beispiele
Maximale Breite in Pixeln festlegen
In diesem Beispiel ist das „child“ entweder 150 Pixel breit oder so breit wie das „parent“, je nachdem, welcher Wert 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
| Spezifikation |
|---|
| CSS Box Sizing Module Level 3 # sizing-values |