CSS/Funktionen/min()

Browserunterstützung
caniuse.com

Die CSS-Funktion min() vergleicht zwei (oder mehr) Werte (meist unterschiedlicher Einheiten) und liefert den kleinsten Wert.

anwendbar auf

alle Zahlen, Prozentwerte, Längenangaben, Winkelmaße, Zeitangaben oder Frequenzangaben

Parameter

einen oder mehr kommagetrennte Werte (meist unterschiedlicher Einheiten)

Beispiel

  img {
    width: min(100%, 25em);
  }

Die Breite der Grafik wird auf 100% der Containerbreite oder 25em festgelegt, je nachdem welcher Wert der kleinere ist. Wenn also der Container breiter wird als 25em, was sehr häufig der Fall sein wird, ist die Breite der responsiven Grafik dennoch auf (verwirrender Weise) maximal 25em begrenzt.

Beachten Sie: Wenn Sie die min()-Funktion zur Festlegung einer maximalen Schriftgröße verwenden, sollten Sie trotzdem sicherstellen, dass font-size mindestens 200% vergrößert werden kann, ohne assistive Technologien wie eine Zoom-Lupe verwenden zu müssen.

Empfehlung: Man könnte auch ein flexibles padding festlegen, das maximal 2em Breite einnimmt:

img {
	width: min(100% - (2 * 5vh), 400px);
	padding: min(5vh, 2em) min(5vw, 2em); 
}

Siehe auch

• Einstieg in CSS
  • Vom Entwurf zum Layout

Weblinks

• W3C: Mathematical Expressions
• MDN: min()
• Browser-Support: caniuse.com