entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

4votos

Hacer un ovalo vertical con imagen

Estoy intentando meter una imagen dentro de un circulo ovalo, al principio lo hice con un canvas, pero el problema del canvas, es que si la imagen es más grande que el canvas, tapa el canvas y si es inferior no abarca toda el área del canvas, así que busque una solución más sencilla en CSS, con la propiedad border-radius, se consigue el efecto que busco, que es, que la imagen abarque toda el área del óvalo y no quede nada por fuera, pero otro problema que me surgio es que creando un óvalo de esta manera, solo se pueden crear óvalos horizontales, es imposible hacerlos verticales, entonces se me ocurrió rotar el div, con la propiedad transform: rotate() pero claro, no solo rota el div, sino que la imagen también,

¿alguna idea para poder hacer este óvalo vertical u otro método o técnica para hacerlo?, he buscado por san google pero no encuentro nada

El codigo lo encontrareis aquí:
http://codepen.io/bichomen/pen/yVJeRX

Saludos

1 Respuesta

4votos

jrgm0005 Puntos2990

Hola @bichomen,

Aquí te dejo una solución para hacer tu óvalo vertical, usando solo CSS y usando tu codepen como base.

Usa background-size : cover.

Te dejo mi ejemplo de código. Espero que te sirva.

Ejemplo

Un saludo.

3votos

bichomen comentado

¡oohh! muchas gracias, desconocía esa propiedad del cover

1voto

jrgm0005 comentado

Nada, estamos para ayudar, te dejo un pen más. Puedes comparar, para seleccionar la que mejor prefieras.

Ejemplo 1
Ejemplo 2 (Centrado)

2votos

bichomen comentado

El primero con la propiedad cover ya me va bien porque recorta la imagen y es el efecto que busco, gracias igualmente

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta