MAKING IMAGES RESPONSIVE CSS

To make an image responsive, you need to give a new value to its width property and the height of the image will adjust itself automatically.

NOTE: always use relative units for the width *property like *[percentage], rather than absolute ones like pixels.

example

img{
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
}

1. Set the image width to 100%, consider working with a fixed height.
2. We use object-fit property to specify how an img should be resized to fit its container.
3. Lastly we center the image, object-position property is used together with object-fit to specify how the img should be positioned with x/y coordinates inside its "own content box".

I hope this post has helped you understand and solve your problems with responsive images. If you want to learn more about web development, feel free to check out my .

Thank you for reading!