How to resize to the img tag appropriate?

Question

I want to show an image in small windows but i need to save on the ratio of the image(I still want that people can know what it is). For example lets say that the image is 1000X200 pixels, and there's a div that defined as: height: 100px; width: 100px; So I want that the image will wrote like that:

<img src="asd.jpg" height=20 width=100 /> 

and not

<img src="asd.jpg" height=100 width=100 /> 

or not

<img src="asd.jpg"/> 

and then there's scrolls..

I can work with percentages, but how do I do it.. (and does it even work with percentages alone?)

Answer 1

If you set max-height and max-width in CSS, modern browsers will restrict it to that size but keep the aspect ratio correct:

<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" /> 

Answer 2

If your parent div has a set width and height, you could set the max-width and max-height of the img to 100%:

div {   width: 100px;   height: 100px; } div > img {   max-width: 100%;   max-height: 100%; } 

(It's always a good practice to give images max-width of 100%, for mobile browsers etc.)