Understanding Width of Image

We know that

foo { width: 100%; }

means the foo element will be 100% width, relative to it's parent width.

What if i have image with max-width and with width specified?

The one that defined in css will be used. It's a little bit different with standard inline css where style defined in "style" attribute will be loaded first.

HTML:

<h1>To see the result, please resize the result window width</h1>

<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" width="400px" />

<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" width="400px" class="mw" />

<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" width="400px" class="w" />

CSS:

.mw {
    max-width: 100%;
}

.w {
    width: 200px;
}

See this fiddle: http://jsfiddle.net/mufid/wx7RZ/5/