This is a draft lesson and it may still be under review
1 min read

How to make an image responsive

The <img> tag is broken, it doesn't work on use generated images because they loose proportions, here is how to work around it.

A lot of websites use rounded profile images, a technique that really makes a website more beautiful!

Rounded Image Example

The obvious way create a rounded profile picture is to create an image tag and apply border-radius:100%. The problem with this approach, is that it only works for squared pictures... profile pictures with different height and width will not look like a circle, they will look like ovals:

Image tag vs div with background-image

Instead of doing that, the right approach will be to create a squared div (a.ka: with equal width and height), assign the image as a background, and then apply a border-radius to that div.

If the image ends up being bigger than the div (or with different proportions) we can adjust the background-position or background-size to choose what part of the image we want to display inside of the circle.

Using background-image instead of image tag for reponsiveness