71

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.

Joe Morano
  • 1,715
  • 10
  • 50
  • 114

7 Answers7

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

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

JJJ
  • 32,902
  • 20
  • 89
  • 102
  • 59
    -1, this doesn't answer the actual question. I guess it worked in the OPs case, but the question is: Where is the `max-width` in _percent_ in this answer? Instead the answer simply defines a `width`, which is something different. – Zelphir Kaltstahl May 16 '16 at 16:42
  • 6
    @Zelphir I don't really understand your comment; the OP specifically wanted to set the width to either 20% or 100px, whichever is smaller, and this does exactly that. – JJJ May 16 '16 at 18:35
  • 17
    That's not the same as setting two maximums and selecting the minimum of those. If the content did not fill `20%` of the _parent_, you'd still set the _element_ to be `20%` wide, while this might be not required or not wanted. If you have a max-width both for `px` and `%`, you'd not have this behavior. – Zelphir Kaltstahl May 16 '16 at 19:27
  • 1
    @Zelphir quoting question: "In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values." if parent width is 1000px then "pixel value of the percent" is 1000px * 20% = 200px. and then "lower of the two values" is 200px vs 100px. Juhana's answer is correct! – Jinjinov May 17 '16 at 09:57
  • 1
    @JinJi Well, pick your choice, then the title of the question is misleading and ambigous. – Zelphir Kaltstahl May 19 '16 at 13:56
  • 6
    @Zelphir The question is clear and does not conflict with the title, but this answer is indeed not correct. Indeed the OP writes that the browser should choose the lowest value of the two, but it is implied that this value should then become the max-width, not the width. I guess the current method would be to use CSS Grid layout and the [minmax()](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax) function. – herman Sep 08 '17 at 13:51
51

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>
Jason Axelson
  • 4,485
  • 4
  • 48
  • 56
14

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()

Hristiqn Tomov
  • 141
  • 1
  • 5
10

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.

ndsmyter
  • 6,535
  • 3
  • 22
  • 37
Kiaurutis
  • 827
  • 7
  • 10
7

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.

Druckles
  • 3,161
  • 2
  • 41
  • 65
1

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;
    }
}
Aaron Cicali
  • 1,496
  • 13
  • 24
0

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;}}
Ph Abd
  • 77
  • 7