Skip to content

Commit 255de18

Browse files
committed
https://github.com/learnpack/learnpack/issues/695
1 parent cf58c82 commit 255de18

File tree

2 files changed

+18
-7
lines changed

2 files changed

+18
-7
lines changed

exercises/08-Rounded-Image/README.es.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,20 @@
22

33
Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realmente hace que un sitio web sea más hermoso!
44

5-
La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`. El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos:
5+
La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`.
6+
7+
El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos:
68

79
![Example Image](../../.learn/assets/08-1.png?raw=true)
810

911
## 📝 Instrucciones:
1012

11-
Adicionalmente a `border-radius` tenemos que tambien utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721).
13+
1. Usa `border-radius`.
14+
15+
2. Adicionalmente a `border-radius`, tenemos que también utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721).
16+
17+
## 💡 Pista:
1218

13-
Si la imagen es más grande que el `div` y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`.
19+
+ Si la imagen es más grande que el `div` y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`.
1420

15-
En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/)
21+
+ En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/)

exercises/08-Rounded-Image/README.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@ The obvious way create a rounded profile picture is to create an image tag and a
88

99
## 📝 Instructions:
1010

11-
In this case, in addition to `border-radius`, you will have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
11+
1. Use `border-radius`.
1212

13-
If the image ends up being bigger than the `div` (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle.
13+
2. In this case, in addition to `border-radius`, you will have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
1414

15-
You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/)
15+
16+
## 💡 Hint:
17+
18+
+ If the image ends up being bigger than the `div` (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle.
19+
20+
+ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/)
1621

0 commit comments

Comments
 (0)