Have you ever spent hours trying to make an image responsive? You even take the step of giving your image a width and height of 100% and the image just refuses to bend to your will. Worry no more cause I bring to you a concoction to cure this antagonising syndrome👽

The cure is easy to apply, just follow the steps below;

1. Wrap the image in a container div.

<div class="container">
      <img src="./cat.jpg" />
</div>

1. Assign the container div a specific height and width.

.container {
      width: 500px;
      height: 500px;
}

1. Set the width and height of the image to 100%.

img {
     width: 100%;
     height: 100%;
}

1. Add a touch of object-fit so the image can resize to fit in the container. We will set the object-fit to cover.

img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

And that my friends should do the magic and take away your troubles regarding image responsiveness😉. Thank you for reading till the end😌