Minimale und maximale Breite / Höhe

Bisher haben wir gesehen, wie wir einem Element relative und absolute Größen geben können, indem wir die Eigenschaften width und height verwenden. Es besteht jedoch eine andere Möglichkeit: Geben Sie die minimale und/oder maximale Größe an. Zu diesem Zweck gibt es vier Eigenschaften: min-heigth, max-height, min-width und max-width. Ihr Zweck sollte leicht von ihren Namen zu unterscheiden sein, aber wie und wann sie zu verwenden sind, ist möglicherweise nicht gleich klar.

Wenn Sie die minimale und/oder maximale Größe eines Elements angeben, können Sie die fließende Natur der Elemente auf einer Webseite nutzen und einem bestimmten Element ermöglichen, innerhalb eines begrenzten Satzes von Dimensionen zu expandieren und zu subtrahieren, anstatt eine konstante und absolute Größe wie wir zu definieren Dies geschah mit den Eigenschaften height und width. Genau wie bei width und height können Sie mit den Eigenschaften min-* und max-* eine absolute oder relative Längeneinheit oder eine prozentuale Größe angeben.

Minimale Breite und Höhe

Mit den Eigenschaften min-width und min-height können Sie die kleinstmögliche Größe eines Elements definieren. Wenn für das Element keine Breite und/oder Höhe definiert ist (Auto) oder wenn diese Werte kleiner sind als die definierte Mindesthöhe und -breite, haben die Mindestwerte für Höhe und Breite Vorrang. Dies lässt sich leicht an einem Beispiel veranschaulichen:...

<style type="text/css">
.box {
	width: 50px;
	height: 50px;
	background-color: DarkSeaGreen;
	padding: 10px;
	margin: 20px;
	float: left;
}
</style>

<div class="box">
	Box 1 - Default
</div>

<div class="box" style="min-height: 80px; min-width: 80px;">
	Box 2 - Minimum height and width
</div>

<div class="box" style="min-height: 80px; min-width: 80px;">
	Box 3 - Minimum height and width. Only expands to 80px.
</div>

<div class="box" style="min-height: 80px; min-width: 80px; height: auto;">
	Box 4 - Minimum height and width. Only expands to 80px, unless no max-height/height have been specified (auto)
</div>

Wenn Sie das Beispiel testen, stellen Sie fest, dass das zweite Feld standardmäßig größer ist, obwohl Breite und Höhe ursprünglich auf 50 Pixel festgelegt wurden. In diesem Fall haben die Werte für Mindestbreite und Mindesthöhe Vorrang.

Schauen Sie sich nun die dritte Box an. Es hat mehr Inhalt als die Sekunde, und obwohl die Minimalwerte normalerweise ein Wachstum zulassen würden, wird es durch die Tatsache, dass es jetzt sowohl in seiner Höhe als auch in seiner Minimalhöhe überholt ist, auf den größten Wert der beiden begrenzt (80px). Wenn wir zulassen möchten, dass es darüber hinaus wächst, sollten Höhe und / oder Breite nicht definiert werden. Wir haben dies mit der vierten Box veranschaulicht, in der wir den Wert für die Höhe auf auto zurücksetzen. Dies ist der Standardwert, wenn er nicht über die .box-Auswahl festgelegt wurde. Mit dieser Option kann das Element nun vertikal vergrößert werden Platz für den Inhalt.

Maximale Breite und Höhe

Manchmal möchten Sie ein Element auf eine bestimmte Breite und/oder Höhe beschränken. Natürlich kann dies mit den Eigenschaften width und height erfolgen, aber dies zwingt das Element dazu, die ganze Zeit auf dieser Größe zu bleiben - egal, ob der Inhalt dies erfordert oder nicht. Wenn Sie stattdessen die Eigenschaften max-width und/oder max-height verwenden, können Sie zulassen, dass ein Element die Größe hat, die für den Inhalt erforderlich ist, und dann mit dem Inhalt bis zu einem bestimmten Punkt mitwachsen.

Hier ist ein Beispiel, in dem wir max-height und max-width verwenden:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	padding: 10px;
	margin: 20px;
	float: left;
}
</style>

<div class="box">
	Box 1 - Default
</div>

<div class="box" style="max-height: 100px; max-width: 100px;">
	Box 2 - Maximum height and width
</div>

<div class="box" style="max-height: 100px; max-width: 100px;">
	Box 3 - Maximum height and width, this time with more content
</div>

Beachten Sie, wie sich jedes der drei Felder unterschiedlich verhält, je nachdem, ob Maximalwerte angegeben sind oder nicht und wie viel Speicherplatz der Inhalt benötigt.

Zusammenfassung

Die Eigenschaften für die maximale und minimale Breite/Höhe bieten Ihnen zusätzlich zu den regulären Eigenschaften für die Breite und Höhe eine zusätzliche Kontrollebene. Bitte beachten Sie, dass bei Angabe von min-height, max-height und height die min-height Vorrang vor beiden hat, während die max-height nur Vorrang vor der height hat. Gleiches gilt für die breitenbezogenen Eigenschaften.