DEV Community


Posted on



Image description
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.


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".

Image description

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!

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.