0
222
ViewsCómo crear un área redonda para fijar la imagen como avatar de Facebook
Estoy creando una entrada, donde los usuarios pueden cargar imágenes de archivo para cambiar avatares como lo hace Facebook. Pero sé que Facebook crea un área de ciclo y los usuarios pueden arreglar la imagen para que encaje con ese círculo (imagen a continuación). No tengo idea de cómo hacerlo. Dime si sabes 
·
Santiago Gelvez
1 answers
Answer question0
Posiblemente, la forma más fácil de lograr este efecto es superponer un rectángulo redondeado con un contorno negro transparente sobre la imagen. Sin embargo, también deberá envolver el elemento en otro contenedor con el overflow configurado como hidden para limitar el fondo a la imagen.
Aquí hay una demostración rápida:
.wrapper { position: relative; overflow: hidden; width: 500px; height: 300px; } .circle { position: absolute; border-radius: 100%; outline: rgba(0, 0, 0, 0.5) 100vmax solid; height: 200px; width: 200px; top: 50px; left: 150px; } <div class="wrapper"> <div class="circle"></div> <img class="image" src="https://picsum.photos/500/300"> </div>
·
Santiago Gelvez
Report
Answer question