1

In the following snippet, I'm specifying the width in pixel of the image using the img.icon selector. However, as I down-resize the browser the image also shrinks. If I remove the commented line, then the size of the image doesn't change as I resize the browser. Why?

I don't understand how max-width: 100% affects it, also because the selector img is less specific than img.icon. What's happening?

I'd like an answer explaining how max-width and width are interacting, because I think I've misunderstood the meaning of one or both of them.

As regards the ruleset img { max-width: 100%; } it's suggested by Keith J. Grant in his book:

TIP As part of a fluid layout, you should always ensure images don’t overflow their container’s width. Do yourself a favor and always add this rule to your stylesheet to prevent that from happening: img { max-width: 100%; }.

Therefore I would like to keep it.

img { max-width: 100%; } /* because of this, the size of the image is not fixed. Why? */

img.icon {
  width: 500px;
}
<img class="icon" src="https://image.shutterstock.com/image-vector/example-red-square-grunge-stamp-260nw-327662909.jpg" alt="Home"/>
Enlico
  • 23,259
  • 6
  • 48
  • 102
  • Does [this](https://stackoverflow.com/questions/17916933/why-doesnt-width-override-max-width) answer your question? – Rob Moll May 04 '21 at 16:58
  • Kind of, but I'll update the question with the reason why I don't like that solution. – Enlico May 04 '21 at 17:01
  • [CSS Doc](https://www.w3.org/TR/CSS21/visudet.html#min-max-widths) as the css rule standard said: >If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'. So CSS basic rule override hierarchy – MaxiGui May 04 '21 at 17:12
  • it's has nothing to with your selector. max-width is applied after width so width can never exceed the max-width – Temani Afif May 04 '21 at 19:57

2 Answers2

2

From MDN

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width

and:

The used value of a CSS property is its value after all calculations have been performed on the computed value.

After the user agent has finished its calculations, every CSS property has a used value.

So, the system says your max-width is the one set in img and that is the used value. The used value of width is 500px as set in img.icon but if it is greater than the calculated max-width the max-width wins.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
2

From the specification:

The following algorithm describes how the two properties influence the used value of the 'width' property:

  1. The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
  2. If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
  3. If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.

I think the algorithm is self-explanatory and here is another example using also min-width to see what is happening:

img {
  max-width: 100%;
  width: 500px;
  min-width: 800px;
}
<img class="icon" src="https://image.shutterstock.com/image-vector/example-red-square-grunge-stamp-260nw-327662909.jpg" alt="Home" />

The final result will be 800px because min-width is the last iteration and will always win.

Same logic happen with height/min-height/max-height: In CSS, does min-height always have priority over max-height in all browsers?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415