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