You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: exercises/08-Rounded-Image/README.md
+5-10Lines changed: 5 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -9,14 +9,9 @@ The obvious way create a rounded profile picture is to create an image tag and a
9
9
## 📝 Instructions:
10
10
11
11
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/)
0 commit comments