0

I am just trying to do my first page using purecss, what I am stuck at the moment is in using pure-img for having responsive images, the image are responsive when I reduce the screen but when the screen become bigger and the image are supposed to increase from their original dimension they just stay static in their original size.

Can you please help me :)

Albic7
  • 11
  • 2

2 Answers2

1

Try:

img {
  max-width: 100%;
  height: auto;
}
Jacob G
  • 13,762
  • 3
  • 47
  • 67
Dominion79
  • 77
  • 6
  • Sorry I may not explain myself properly, the problem is that the images doesn't become big enough, so I guess they should go over their width of 100%. however If I just increase the width it doesn't work, I think it's the purecss that for some reason limit the width of the image to no more than 100% – Albic7 Dec 19 '16 at 01:40
  • Ah ok.. well you could just set the images width: 100%, But this will stretch the image past its resolution.. you could use a Javascript fix but in my opinion using JS for responsive images is overkill. You could also look at the tag but this isn't supported by all browsers so you know IE and all that.. or you could save the images to the always fit the wrapper of your site and use the method above... it means you are sending oversize images to a mobile device but with some image compression is isn't that bad. – Dominion79 Dec 19 '16 at 10:53
0

The simplest way - just append width: 100% on your image.

https://jsfiddle.net/zv95xt4r/

kind user
  • 40,029
  • 7
  • 67
  • 77