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;
}

[this](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) might also help you.. — kukkuz, Sep 17 '16 at 16:16

Johannes · Accepted Answer · 2016-09-17T15:51:19.163

2

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

edited Sep 17 '16 at 15:51

answered Sep 17 '16 at 15:38

Johannes

64,305
18
73
130

The only containing div is the wrapper so making it 100% would make the img cover the whole site. I would want the img to be half the size as the maximum and get smaller when resizing the window. – Higeath Sep 17 '16 at 15:39
so what do you mean by "I would want to scale with browser window"? – Johannes Sep 17 '16 at 15:40
Basically the smaller window the smaller img? Would that only work if the img is the size of the whole window? – Higeath Sep 17 '16 at 15:44
Well, then just use a different percentage value, like 60% (or whatever you like), but using `width`, not `max-width` – Johannes Sep 17 '16 at 15:47

Divyanshu Maithani · Answer 2 · 2016-09-17T16:28:38.610

1

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.

edited Sep 17 '16 at 16:28

answered Sep 17 '16 at 15:33

Divyanshu Maithani

13,908
2
36
47

That was a mistake with copying I've fixed the question it still doesnt work – Higeath Sep 17 '16 at 15:38

score 0 · Answer 3 · edited May 23 '17 at 11:48

0

Read: CSS Image size, how to fill, not stretch?

If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.

width: 100%;
height: 100%
background-size: cover;

edited May 23 '17 at 11:48

Community

1
1

answered Sep 17 '16 at 15:31

IvRRimUm

1,724
3
21
40

Scaling img with window, max-width

3 Answers3

If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.