Scaling img with window, max-width

Question

I have a 64px that I would want to scale with browser window I have added max-width 100% but the image stays the same.

Html

<img src="../images/GitHub-Mark-64px.png">

CSS

img{
    max-width: 100%;
    height: auto;
}

Answer 1

If your image is smaller than the containing DIV, your CSS rule won't make it any bigger. Try to use width instead of max-width:

img{
    width: 100%;
    height: auto;
}

Addition/Edit after Comments of OP:

You can use any percentage value in this rule, like 60% (or whatever you like), but using width, not max-width (which is only a maximum limit, but not an actual size definition).

But note: It won't really look good if the original image is smaller than displayed and is "blown up".

Answer 2

Try using width instead of max-width in your CSS, width attribute actually sets the width of the img. However, setting it to 100% would actually cover the entire space, so perhaps you should use a lesser percentage accordingly.