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 benutzte Wert der width-Eigenschaft größer als der durch max-width angegebene Wert wird.

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

css

/* <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-width als absoluten Wert.
<percentage>: Definiert die max-width als Prozentsatz der Breite des umgebenden Blocks.
none: Keine Begrenzung der Box-Größe.
max-content: Die intrinsische bevorzugte max-width.
min-content: Die intrinsische minimale max-width.
fit-content: Verwendet den zur Verfügung stehenden 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 zur Verfügung stehenden Platz, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).
stretch: Begrenzen Sie die maximale Breite der Randbox des Elements auf die Breite seines umgebenden Blocks. Es versucht, die Randbox in den verfügbaren Raum des umgebenden Blocks zu füllen, verhält sich also in gewissem Maße ähnlich wie 100%, wendet die resultierende Größe aber auf die Randbox an und nicht auf die durch box-sizing bestimmte Box.

Hinweis: Um die von Browsern verwendeten Aliase für den Wert stretch und dessen Implementierungsstatus zu überprüfen, lesen Sie den Abschnitt zur Browser-Kompatibilität.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer max-width nicht abgeschnitten werden und/oder nicht andere Inhalte 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

Festlegen einer maximalen Breite in Pixel

In diesem Beispiel wird das "child" entweder 150 Pixel breit sein oder die Breite des "parent", je nachdem, welcher Wert kleiner ist.

HTML

html

<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

CSS

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

Browser-Kompatibilität

Siehe auch

min-width
width
max-inline-size
max-block-size
box-sizing
Einführung in das CSS-Boxmodell Leitfaden
CSS-Boxmodell Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden