[Jefferson Maldonado]

Hola Martizel, un gusto saludarte, el título de imagen siempre aparece por defecto tras colocarla en el módulo de imagen, una solución puede ser a través de un pequeño Snippet de CSS:

    /* Hide image titles on hover */
    img {
        pointer-events: none;
    }

Este ocultará el pointer event en las imágenes.

Otra solución podría ser el uso de este plugin: https://wordpress.org/plugins/hide-titles-on-hover/

Que hace justo esta función también.

Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

wordpress.org

Hide Tooltips on Hover – Clean Up Title Attributes Without Losing Accessibility

Hide browser tooltips on hover while preserving accessibility for screen readers.

[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

[Jefferson Maldonado]

¡Hola!

Muy buena tu implementación, ya tienes la base correcta. El problema que describes no viene de object-fit: cover (ese es el enfoque adecuado), sino de cómo el navegador interpreta imágenes muy desproporcionadas en relación con el contenedor circular.

Aquí van algunas recomendaciones prácticas para dejarlo tipo “avatar de redes sociales”:

1. Forzar un contenedor cuadrado fijo

Asegúrate de que el contenedor padre siempre sea cuadrado. Por ejemplo:

.foto-circular,
.img-redonda {
  width: 150px;   /* o el tamaño que necesites */
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-circular img,
.img-redonda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

De esta forma, sin importar si la imagen es muy vertical u horizontal, el contenedor recorta lo sobrante y se mantiene siempre perfecto el círculo.

2. Deja que el círculo lo genere el contenedor, no la imagen

En lugar de aplicar border-radius: 50% a la imagen, aplícalo al contenedor (.foto-circular o .img-redonda). Eso garantiza que la máscara circular recorte el contenido sin deformarlo.

Resumen:

Haz el contenedor cuadrado y redondo (border-radius: 50% + overflow: hidden).

Usa object-fit: cover y object-position: center en la imagen dentro.

Así tendrás siempre avatares tipo Facebook/LinkedIn sin importar el tamaño original.