How to create round images

Go back to HTML and CSS Index

In the last assignment you worked on creating a website based on a wireframe where one of the challenges was to add a rounded image.

There are more ways to complete the task, and we will look at some of them in this session.

Credits

The image used in the examples was downloaded from unsplash.com.

Photo by Nathan Anderson
unsplash-logoNathan Anderson

Solution 1: Cropping the image

A fast way to solve the task is to crop the image manually in a imaging software, making it a square. Thereafter, all you need to do is add a border-radius.

HTML

<img src="img/img-cropped.jpg" alt="Cropped image" class="imgcropped">
HTML

CSS

.imgcropped {
border-radius: 50%;
height: 320px;
width: 320px;
}
Adding style instructions to make the image a perfect circle instead of a square

The result

Cropped image

Solution 2: The background-image property

Another way of making the image appear round is to insert it as a background image in a container with rounded corners:

HTML

<div class="imgbg">
</div>
The HTML

CSS

.imgbg {
border-radius: 50%;
height: 320px;
width: 320px;
background-image: url(img/img.jpg);
background-size: cover;
background-position: center;
}
Adding style instructions to the container

The result

Solution 3: The object-fit property

A third option is to insert the image as an image but then use the object-fit property to adjust the format:

HTML

<img src="img/img.jpg" alt="Original image by Nathan Anderson" class="imgfit">
The HTML

CSS

.imgfit {
border-radius: 50%;
height: 320px;
width: 320px;
object-fit: cover;
object-position: center;
}
Adding style instructions to the image

The result

Image adjusted using the object-fit property

What solution to choose then?

The advantage of solution number 1 is that the image is smaller because it has been cropped. If the image is not used in its original format in other places on the website, this is probably the best solution as we can add an alternative text to the image which is good for SEO.

The result of solution number 2 is the same in appearance as solution number 1, but there is the disadvantage that it is not possible to add an alternative text which makes this solution not ideal when it comes to SEO. The image is also larger so it takes longer for it to load. An advantage, though, is that we get to play with some effect like when setting the background-attachment to fixed, and we can also add text on top of the image.

Solution number 3 has an alternativ text, which is a plus, and the amount of code is limited. The image is however larger than the one in solution number 1 so it will take longer for it to load, but on the positive side, we don't need an image editor to manually edit the format of the image.