CODEWITHSUNDEEP
htmlcss
MetroWind
MetroWind

Reputation: 541

CSS, why is min() function in max-width not working?

In the code below, I set the max-width of the 1st image to be min(40px, 10%), but apparently it doesn't work. Firefox says “Invalid property value”. Why is that?

img#test1
{
  max-width: min(40px, 10%);
}

img#test2
{
  max-width: 10%;
}
<!doctype html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
</head>

<body>
  <div>
    <img id="test1" src="https://i.imgur.com/JfmBtYb.png" />
  </div>
  <div>
    <img id="test2" src="https://i.imgur.com/JfmBtYb.png" />
  </div>
</body>

</html>

Upvotes: 2

Views: 5927

Answers (1)

Dominic Unimog Atsu
Dominic Unimog Atsu

Reputation: 311

Your problem has to do with browser compatibility for min(). It's not yet widely adopted, even the https://developer.mozilla.org/en-US/docs/Web/CSS/min DOC shows that compatibility is unknown for many browsers.

Upvotes: 6

Related Questions