Last Updated: February 25, 2016
· mufid

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.


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

<img src="" width="400px" />

<img src="" width="400px" class="mw" />

<img src="" width="400px" class="w" />


.mw {
    max-width: 100%;

.w {
    width: 200px;

See this fiddle: