Skip to content

Commit 0b5d8c3

Browse files
authored
Update README.md
1 parent e836081 commit 0b5d8c3

File tree

1 file changed

+5
-10
lines changed

1 file changed

+5
-10
lines changed

exercises/08-Rounded-Image/README.md

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,9 @@ The obvious way create a rounded profile picture is to create an image tag and a
99
## 📝 Instructions:
1010

1111

12-
1. Instead of doing that, the right approach will
13-
be to create a squared div (a.ka: with equal width
14-
and height), assign the image as a background, and
15-
then apply a border-radius to that div.
16-
17-
2. If the image ends up being bigger than the div
18-
(or with different proportions) we can adjust the
19-
background-position or background-size to choose
20-
what part of the image we want to display inside
21-
of the circle.
12+
In addition to the border-radius you have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
13+
14+
If the image ends up being bigger than the div (or with different proportions) we can adjust the object-position to choose what part of the image we want to display inside of the circle.
15+
16+
You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/)
2217

0 commit comments

Comments
 (0)