To make an image responsive, we have to make sure that its size changes with the size of the viewport. To do this, we'll first need to add an image to HTML (here's one: <img src="https://images.pexels.com/photos/162313/cheetah-sitting-big-cat-feline-162313.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="cheetah">. Then, in CSS, we'll set the width as a percentage of the visible screen instead of using absolute units like pixels. Setting the height to auto ensures that the image is not distorted out of proportion.
CSS
img {
width: 100%;
height: auto;
}
Change the size of the browser window to see the image changing with it.