`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 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, jedoch überschreibt min-width 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 Größe des Kastens.
max-content: Die intrinsische bevorzugte max-width.
min-content: Die intrinsische minimale max-width.
fit-content: Nutzen Sie 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 verfügbaren Platz, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, argument)).
stretch: Begrenzung der maximalen Breite der Margin-Box des Elements auf die Breite seines Containment-Blocks. Sie versucht, die Margin-Box so zu gestalten, dass sie den verfügbaren Platz im Containment-Block ausfüllt, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Margin-Box an, anstatt auf den Kasten, der durch box-sizing bestimmt wird.

Hinweis: Um Aliase, die von Browsern für den stretch-Wert verwendet werden, und ihren Implementierungsstatus zu überprüfen, sehen Sie sich den Abschnitt zur Browser-Kompatibilität an.

Barrierefreiheit

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

Setzen der maximalen Breite in Pixeln

In diesem Beispiel wird das "Child" entweder 150 Pixel breit oder so breit wie das "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

Spezifikation
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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

max-width CSS property

HTML

CSS

Ergebnis

Help improve MDN

`max-width` CSS property