How to resize an image depends on the resolution?

advertisements

I have an img of 200px by 200px. I have a container for the img. The container size is 100%x100%. Basically the size of the container is depends on the window size. What I would like to achieve is if the screen size is gets smaller than 200px it should resize the img and make it smaller. I also would like to keep the ratio of the img. it should get smaller from height and width. is there a ready code for doing this?


Just add:

img { max-width: 100%; }

to your CSS (perhaps being more specific with your selector) and make sure your container has position: relative specified.

You probably want to ensure that the width of the container doesn't exceed the width of your image, as it will start to become pixelated. If that's not an issue, you can replace max-width with just width above. Example here.