Reputation: 169
A very simple problem but I'm not able to find a solution by myself...
Just an image in a blank HTML page and a CSS class that has a max-width set to 100% to help scaling this image when scaling the browser window.
The problem is when the window's width exceed the image's width, the image wouldn't grow anymore...
In my mind the 100% set on max-width is 100% of the parent right ?? Not the image itself ?
Link to Fiddle : https://jsfiddle.net/gr7u1ytq/2/
.image {
background: grey;
max-width: 100%;
}
<center>
<img class="image" src="https://preview.ibb.co/iNVyTd/Graph_Monthly_Expenses_1270.png" />
</center>
Upvotes: 0
Views: 361
Reputation: 110
You do not need to give a particular class to img tag, just use below CSS for general images.
img
{
max-width: 100%;
}
after using the above code image will never cross the window size,
Upvotes: -1
Reputation: 5088
max-width
will only let the image grow as big as the image pixel dimensions. Your image is naturally 640px wide.
If you do this...
.image {
background: grey;
width: 100%;
}
Then the image grows 100% of the window.
https://jsfiddle.net/joshmoto/gr7u1ytq/3/
Upvotes: 2
Reputation: 556
Set image width 100% also
.image {
background: grey;
max-width: 100%;
width: 100%;
}
Upvotes: 2