David CASBONNE
David CASBONNE

Reputation: 169

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>

Upvotes: 0

Views: 361

Answers (3)

eSparkBiz Team
eSparkBiz Team

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

joshmoto
joshmoto

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

iPraxa Inc
iPraxa Inc

Reputation: 556

Set image width 100% also

.image {
  background: grey;
  max-width: 100%;
  width: 100%;
}

Upvotes: 2

Related Questions