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 1

Answer 1

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.)