CSS/Funktionen/min()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch