Max-Height & Max-Width

Stellt euch vor, ihr wollt eine Homepage machen, auf der die Nutzer die Möglichkeit haben sollen, Bilder hochzuladen. Das Problem dabei ist, dass die Nutzer nicht immer gleichgroße Bilder haben. Nutzer A, hat Bilder in HD(1280*720) ein Nutzer B in Full-HD (1920*1080) und Nutzer C sogar noch größere Bilder. Wenn diese ihre Bilder hochladen und ihr als Ersteller der Website nicht darauf geachtet habt, die Bilder auf die passende Größe verkleinern zu lassen, wird eure Website total verschoben sein.

Was also tun?

Verwendet max-height und max-width damit könnt ihr direkt einstellen, welche maximale Höhe und Breite ein ein Element(z.B. Bild) haben soll, wenn es auf der Website angezeigt wird.

Verwendet min-height und min-width damit könnt ihr direkt einstellen, welche minimale Höhe und Breite ein ein Element(z.B. Bild) haben soll, wenn es auf der Website angezeigt wird.

Maximale und Minimale Größe von Bildern in CSS

img{
	max-height: 300px;
	max-width: 300px;
}

Auf diese Weise werden die Bilder auf der Seite maximal 300 Pixel breit und auch maximal 300 Pixel hoch sein.