Question: I am new to responsive web design and was looking at an [answer](https://stackoverflow.com/questions/11078913/how-to-set-max-width-of-an-image-in-css).

It doesn't really explain much but provides a solution.

If an `img` is set as `width: 100%` I understand that it will occupy 100% of the browser window or its containing element.

The `max-width` property [states](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) that it is used to set the max width of an element.

If I set an `img` tag to `max-width: 100%` to what element/context is the percent calculated against?

All I see is when `max-width` is used the image scales down but never up.

Max-width example: <http://jsfiddle.net/ErNeT/1445/>

Width example:<http://jsfiddle.net/ErNeT/1446/>

Answer: 
> 
> If I set an img tag to max-width: 100% to what element/context is the
>  percent calculated against?
> 
> 
> 

By default an img tag has no dimension set on it. So whatever happens, that image will never resize. However, applying max-width will make it behave like it has 100% width. It will resize based on the parent container BUT will stop at the maximum width the image has. For example: if the image was sliced to have 100px width, it will resize up to 100px width. 

On the other hand, by applying width (and no max-width property) it will disregard all other width properties of the image and the parent container.
When you set percentage values, both `width` and `max-width` are relative to the containing block. However, if the width of the containing block depends on the width of the element, the resulting layout is undefined. 

From the specification,

<https://www.w3.org/TR/CSS2/visudet.html#the-width-property>

> 
>  Specifies a percentage width. The percentage is
>  calculated with respect to the width of the generated box's containing
>  block. If the containing block's width depends on this element's
>  width, then the resulting layout is undefined in CSS 2.1. Note: For
>  absolutely positioned elements whose containing block is based on a
>  block container element, the percentage is calculated with respect to
>  the width of the padding box of that element. This is a change from
>  CSS1, where the percentage width was always calculated with respect to
>  the content box of the parent element.
> 
> 
> 

<https://www.w3.org/TR/CSS2/visudet.html#min-max-widths>

> 
>  Specifies a percentage for determining the used value.
>  The percentage is calculated with respect to the width of the
>  generated box's containing block. If the containing block's width is
>  negative, the used value is zero. If the containing block's width
>  depends on this element's width, then the resulting layout is
>  undefined in CSS 2.1.
> 
> 
>