Higeath Higeath - 2 months ago 13
CSS Question

Scaling img with window, max-width

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

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".

Comments