CSS-Höhe, -Breite und maximale Breite


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die CSS-Eigenschaften height und width werden zum Festlegen verwendet Höhe und Breite eines Elements.

Die CSS-Eigenschaft max-width wird verwendet, um die maximale Breite eines Elements festzulegen.


This element has a height of 50 pixels and a width of 100%.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 50px;
  width: 100%;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS height and width properties</h2>

<div>This div element has a height of 50 pixels and a width of 100%.</div>

</body>
</html>



CSS-Einstellung von Höhe und Breite

Die Eigenschaften height und width werden zum Festlegen verwendet Höhe und Breite eines Elements.

Die Eigenschaften „Höhe“ und „Breite“ umfassen keine Abstände, Ränder oder Ränder. Es legt die Höhe/Breite des Bereichs innerhalb des Abstands, des Rands und des Rands von fest das Element.


CSS-Werte für Höhe und Breite

Die Eigenschaften height und width kann folgende Werte haben:

  • auto - Dies ist die Standardeinstellung. Der Browser berechnet die Höhe und Breite

  • length - Definiert die Höhe/Breite in px, cm, usw.

  • % - Definiert die Höhe/Breite in Prozent von der enthaltende Block

  • initial - Setzt die Höhe/Breite auf ihren Wert Standardwert

  • inherit - Die Höhe/Breite wird sein vom übergeordneten Wert geerbt


Beispiele für CSS-Höhe und -Breite

This element has a height of 200 pixels and a width of 50%

Beispiel

Legen Sie die Höhe und Breite eines <div>-Elements fest:

div {
  height: 
200px;
  width: 50%;
  background-color: powderblue;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>


This element has a height of 100 pixels and a width of 500 pixels.

Beispiel

Legen Sie die Höhe und Breite eines anderen <div>-Elements fest:

div {
  
height: 
100px;
  width: 500px;
  background-color: powderblue;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 100px and a width of 500px.</div>

</body>
</html>


Hinweis: Denken Sie daran, dass die Eigenschaften height und width keine Abstände und Ränder enthalten , oder Ränder! Sie legen die Höhe/Breite des Bereichs innerhalb der Polsterung, des Randes usw. fest. und Rand des Elements!



Maximale Breite festlegen

Die Eigenschaft max-width wird verwendet, um die maximale Breite eines Elements festzulegen.

Die max-width kann in Längenwerten wie px, cm usw. oder in Prozent (%) angegeben werden enthaltenden Block oder auf „Keine“ gesetzt (dies ist Standard. Bedeutet, dass es keine maximale Breite gibt).

Das Problem mit dem oben genannten <div> tritt auf, wenn das Browserfenster kleiner als die Breite von ist das Element (500px). Der Browser fügt der Seite dann eine horizontale Bildlaufleiste hinzu.

Die Verwendung von max-width verbessert in dieser Situation stattdessen die Handhabung kleiner Fenster durch den Browser.

Tipp: Ziehen Sie das Browserfenster auf eine Breite von weniger als 500 Pixeln, um den Unterschied zu sehen die beiden Divs!

This element has a height of 100 pixels and a max-width of 500 pixels.

Hinweis: Wenn Sie aus irgendeinem Grund beide verwenden width-Eigenschaft und die max-width-Eigenschaft für dasselbe Element und den Wert der Die Eigenschaft width ist größer als die max-width-Eigenschaft; Die Die Eigenschaft max-width wird verwendet (und die Die Eigenschaft width wird ignoriert.

Beispiel

Dieses <div>-Element hat eine Höhe von 100 Pixel und a maximale Breite von 500 Pixeln:

div {
    max-width: 500px;
  
height: 
100px;
  background-color: powderblue;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width of an element</h2>

<div>This div element has a height of 100px and a max-width of 500px.</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>



Probieren Sie es selbst aus - Beispiele

Legen Sie die Höhe und Breite der Elemente fest

<!DOCTYPE html>
<html>
<head>
<style>
img.one {
  height: auto;
}

img.two {
  height: 200px;
  width: 200px;
}

div.three {
  height: 300px;
  width: 300px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of elements</h2>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>

<p>The height and width of this div element is 300px:</p>
<div class="three"></div>

</body>
</html>


Dieses Beispiel zeigt, wie Sie die Höhe und Breite verschiedener Elemente festlegen.

Stellen Sie die Höhe und Breite eines Bildes in Prozent ein

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}

img.one {
  height: auto;
  width: auto;
}

img.two {
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>

<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">

</body>
</html>


Dieses Beispiel zeigt, wie Sie die Höhe und Breite eines Bildes mithilfe eines Prozentwerts festlegen.

Legen Sie die minimale und maximale Breite eines Elements fest

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 400px;
  min-width: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>


Dieses Beispiel zeigt, wie Sie mithilfe eines Pixelwerts eine Mindestbreite und eine Maximalbreite eines Elements festlegen.

Legen Sie die minimale und maximale Höhe eines Elements fest

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-height: 600px;
  min-height: 400px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>


Dieses Beispiel zeigt, wie Sie mithilfe eines Pixelwerts eine Mindesthöhe und eine Maximalhöhe eines Elements festlegen.



Alle CSS-Dimensionseigenschaften

height

Legt die Höhe eines Elements fest

max-height

Legt die maximale Höhe eines Elements fest

max-width

Legt die maximale Breite eines Elements fest

min-height

Legt die Mindesthöhe eines Elements fest

min-width

Legt die Mindestbreite eines Elements fest

width

Legt die Breite eines Elements fest