[Maritzel Euán]

Una pregunta adicional @Jeffersonmald : ¿Los plugins Divi Machine Accounts y Divi Form Builder están actualizados a la última versión en el recurso disponible para descargar?

Muchas gracias por toda la ayuda! 😀

• Esta respuesta fue modificada 5 meses, 2 semanas por  Maritzel Euán.

[Maritzel Euán]

Gracias Jefferson! El CSS me funcionó perfecto. Aprovechando que te estoy consultando un tema de la imagen destacada, quisiera añadir una consulta adicional:

Hola, necesito su ayuda con un detalle de estilo.

Busco que 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 ACF. 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!

• Esta respuesta fue modificada 4 meses, 2 semanas por  Maritzel Euán.
• Esta respuesta fue modificada 4 meses, 2 semanas por  Maritzel Euán.
• Esta respuesta fue modificada 4 meses, 2 semanas por  Jefferson Maldonado.

Visualizacion-no-correcta-de-la-foto-cargada.png 11 KB Image File - Click to view

Opciones

• Copy Download Link

Visualizacion-correcta-de-la-foto-cargada.png 15 KB Image File - Click to view

Opciones

• Copy Download Link

Vista-detalle-del-especialista.png 93 KB Image File - Click to view

Opciones

• Copy Download Link

[Maritzel Euán]

Listo, muchas gracias!

Saludos

[Maritzel Euán]

Muchas gracias por la respuesta! Me causó un poco de confusión ya que en el curso veía que sí se te reflejaba en la pantalla.

Saludos!!