Search code examples
htmlcsswidth

CSS - Image wouldn't enlarge up to its original size

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>

Solution

  • 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/