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

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 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

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