Kindly help in this project,

Hello guys, can you please assist me make this image responsive and center it to the parent. Thank you in advance. Here is the link https://codepen.io/emilynyaruri/pen/abbPvJW

Try:

figure {
  display: block;
  margin: 0 auto;
  max-width: 630px; /* or any desired value to your taste */
  width: 100%;
}

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

Thank you for the help

Note, that you need to remove width and height attributes from your img tag in HTML. And also, that figure will take the height of the image in this case. In your case it’s fine, but in some scenarios you might want to constrain height as well, using the same principle with height and max-height combination.

thanks, i have done that