How to set a max-width as percent AND pixels?

How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.

If I were to set them both like this: {max-width:100px;max-width:20%;} the asset pipeline would simply choose the second one and ignore the first one.

width:20%;
max-width:100px;

This sets the width to 20% but caps it at 100 px.

One way to accomplish this is to simply use two divs

<div class="outer">
  <div class="inner">
    This content will not exceed 100px or 20% width.
  </div>
</div>

<style>
.outer {
  max-width: 90%;
}
.inner {
  max-width: 100px;
}
</style>

This will NOT work with different image sizes/aspect ratios. You can define max-width and max-height separately, if you know the sizes of images. Use this method for a specific group of images, but not as a general rule.

Practical example: You have 5 photos from your phone to be placed in a page and you need some text to be in the other half of screen. You reduce the size of images to 500px wide and 300px high. You want them not to exceed half the screen and not be wider than 250px on tablet. Calculate the max height: 250*300/500=150px.

.img-class {
    max-width: 50%;
}
@media (max-width: 800px) {
    .img-class {
       max-height: 150px;
    }
}

Tested on latest Chrome, Firefox and IE.

I had a specific problem which required a similar solution. I needed to display all images (independent of aspect-ratio, position or extra HTML markup) at their original size, up to a set maximum width in pixels. If the screen is smaller than this fixed size, it should shrink to fit. I.e. setting a width would not satisfy the requirements.

To expand on @Kiaurutis' answer:

img {
  max-width: 400px;
}

@media (max-width: 400px) {
  img {
    max-width: 100%;
  }
}

A working example can be seen here: https://jsfiddle.net/vrehxmpx/. In this example there is an image greater than 400px (always scaled down) and an image smaller than the threshold (only scaled down when the screen is smaller than the image).

To adjust for margins, borders and other stuff you might have on the image, just increase the @media's max-width.

You can now use css min. But you should note that IE does not support it.

width: min(20%, 100px)

https://developer.mozilla.org/en-US/docs/Web/CSS/min()

Don't do this.

I believe the selected answer is correct for the scenario that the OP describes. However, some of the comments argue that the OP has asked to set the max-width property to the lower of the two values, not the width. This also can be done, please see below.

Note: This solution does not make a lot of sense to me. Please use the selected answer, it correctly demonstrates what max-width was made for. The code below will ensure that the max-width property is the lesser of 20% or 100px.

img {
    max-width: 20%;
}

@media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
    img {
        max-width: 100px;
    }
}

I had the same width "page wrap" on my site. I wanted it to be 95% width by default but not more than 1280px. here is how I made it with CSS

.wrap{max-width:95%;margin:0px auto;}
@media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}