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.
From my point of view

```
if width > max-width use max-width

```

Example: Let's say you have 1 div box or Image which is you set the size of the box width > 1000px and max-width 500px. It still follow the max-width.

Example 2 - Using percentage : Let's say that div of your width set 500px, and max-width :100%; what is the result you will get ? The box div will turn 500px that is your starting point. Try shrink it. What is the result you will get next? It's turn responsive.

[DEMO](https://jsfiddle.net/fido3993/cohtj62b/2/)

this is what i understand about the difference between width and max-width.

**Based on your question and fiddle, I think this is the answer what you're looking for.**

Max-width example: [DEMO2](http://jsfiddle.net/fido3993/ErNeT/1447/)
 - When you start use max-width and set 100%. let say your images size is width is 300px. Meaning that your images starting point are 300px. You aren't override the original image width.

Width example: [DEMO3](http://jsfiddle.net/fido3993/ErNeT/1448/)
 - When you start use width and set 100%. Meaning that your image are override the original image width.