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.
The image used in the examples was downloaded from unsplash.com.
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.
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:
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:
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.