How to make a responsive image?

Question

css

Good afternoon! Can you please tell me how to make the image have a certain width and height, but not more than 100%?
It is not difficult to do this, however, you need to somehow report the width / height, otherwise the picture becomes stretched.
Example: https://jsfiddle.net/5fs3dkqj/
How can I decide? Preferably without JS, but you can use it too :) The size of the original image is there.
PS: This question arose due to the fact that when the site is loaded (as well as when changing the image), everything jumps, since the picture does not know its height. And if you set the height, then it becomes stretched.

Answer 1

img {
  max-width: 100%;
}

Answer 2

Сделайте обертку, туда передавайте нужные размеры (https://jsfiddle.net/5fs3dkqj/2/)

Answer 3

object-fit
пример для нормальных браузеров
замазка

Answer 4

img {width: 100%; max-width: 100%; height: auto;}
если не нужно на всю ширину, то width: 100% уберите