CSS/Funktionen/min()

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

Parameter	einen oder mehr kommagetrennte Werte (meist unterschiedlicher Einheiten)
anwendbar auf	alle Zahlen, Prozentwerte, Längenangaben, Winkelmaße, Zeitangaben oder Frequenzangaben
Browsersupport	caniuse: css-math-functions

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); 
}

Weblinks

• W3C: Mathematical Expressions
• MDN: min()

Siehe auch

• CSS/Tutorials/Einstieg
  • Vom Entwurf zum Layout