Diseño UX UI
Explora nuestro Foro de Soporte en Diseño UX/UI, un espacio dedicado a resolver tus dudas y enriquecer... Ver más
Organizadores:
- Organizado por
-
-
Imagen redonda loop divi machine
-
Imagen redonda loop divi machine
Hola! Quisiera su ayuda con un detalle de estilo.
Utilizando Divi Machine, Busco que, utilizando Divi Machine, las fotos de perfil de los especialistas se muestren en formato circular sin importar la proporción de la imagen cargada, tanto en la pagina de directorio (archive) como en la página a la que te lleva cuando le das clic, yo le digo detalle del especialista.
Actualmente tengo un contenedor con clase “foto-circular” y dentro la imagen cargada desde Divi Form Builder que se asigna como imagen destacada de la publicación.
Estoy usando este CSS para la página archive:
.foto-circular img {
border-radius: 50%;
width: 120px;
height: 120px;
object-fit: cover;
text-align: center;
pointer-events: none; /* Hide image titles on hover */
}
Y para la página detalle del especialista, el siguiente:
.img-redonda img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
pointer-events: none;
}
Funciona bien con imágenes cuadradas o incluso algunas rectangulares horizontales, pero el problema surge con fotos más alargadas (por ejemplo, 1143×2048 px). En esos casos, la imagen no se ajusta bien al círculo y se deforma o queda cortada de forma rara.
Lo que necesito es que:
Cualquier imagen (horizontal, vertical o cuadrada) se adapte al círculo sin deformarse.
Siempre se muestre centrada en el recorte.
Que el resultado final sea una foto de perfil redonda, tipo avatar, similar a cómo lo hace Facebook o LinkedIn.
Ya probé con object-fit: cover y object-position: center, pero el resultado sigue sin ser consistente.
¿Podrías orientarme sobre la mejor manera de implementar esto en Divi con imágenes cargadas vía Divi Form Builder? Si existe alguna configuración específica en Divi Machine, un snippet adicional de CSS o una práctica recomendada, me sería de mucha ayuda.
Te adjunto una imagen de la visualización correcta (John Doe) y una incorrecta (la foto de Iron Man que tiene las medidas mencionadas al inicio).
¡Muchas gracias de antemano!
-
0 Respuestas
Aún no hay respuestas para esta discusión ¿Tienes alguna opinión o respuesta? ¡Participa y déjala aquí ahora!
Inicia sesión para responder.
4.6 calificación promedio en 
