Une galerie Divi peut recadrer les images pour les faire rentrer dans des cadres identiques. Résultat : des logos, visuels ou maquettes se retrouvent “coupés”, surtout quand ils sont au format portrait.

Ici, l’objectif est simple : garder 100 % de l’image visible, autoriser le redimensionnement, mais interdire le rognage.

Hypothèses

Le site est sous WordPress avec le thème Divi. Le problème apparaît dans un module “Galerie” en mode grille. Les images affichées dans la galerie sont au format PNG, souvent en portrait.

Symptôme observé : les photos sont rognées dans la grille

Le symptôme est typique : dans la galerie, l’image est affichée “plein cadre”, mais une partie disparaît.

Dans le code HTML, on retrouve une structure Divi classique avec une liste d’items de galerie, chacun contenant un lien et une balise img.

Le point important n’est pas la présence du width/height HTML, mais le fait que Divi affiche des variantes d’images (miniatures) générées par WordPress.

Première piste : corriger le rendu avec du CSS

La première approche logique consiste à forcer un affichage “sans recadrage” via CSS.

L’idée est d’utiliser un rendu de type “contain” (tout est visible), plutôt que “cover” (ça remplit le cadre et ça coupe).

Tentative proposée : forcer l’image à s’adapter au cadre

Une proposition classique est de viser le module galerie et de forcer :

• une largeur à 100 %
• une hauteur automatique
• un object-fit: contain

Le but est d’empêcher l’image d’être étirée ou coupée.

Résultat : aucun changement visible

Dans ce cas précis, le rendu ne change pas.

Ce point est crucial : quand object-fit ne change rien, ce n’est pas forcément parce que le CSS est “mauvais”. C’est souvent parce que la cause du rognage est ailleurs.

Deux causes reviennent très souvent :

• le CSS n’est pas chargé sur la page (cache)
• l’image n’est pas recadrée par le navigateur, mais déjà recadrée en amont, au moment de la génération des miniatures

Ce que l’inspecteur montre : l’image est déjà une miniature

Dans le HTML, l’attribut src de l’image pointe vers un fichier du type :

• nom-image-400x516.png

Ce suffixe 400x516 indique une image dérivée, générée par WordPress.

Même si le srcset propose aussi une image plus grande, Divi peut privilégier une taille précise pour sa grille, et WordPress peut livrer une miniature qui a déjà été construite pour “rentrer” dans un cadre.

Autrement dit : on peut corriger le CSS autant qu’on veut, si l’image affichée est déjà un recadrage, elle restera recadrée.

La vraie cause : Divi impose une taille de vignette

Divi dispose de filtres qui permettent de définir la taille des images utilisées dans sa galerie.

Quand Divi demande une largeur/hauteur fixes, WordPress génère (ou choisit) une miniature correspondante. Selon les réglages, cette miniature peut être recadrée.

C’est ici que le rognage se produit réellement : au niveau du choix de la taille d’image, pas au niveau du rendu final.

Solution validée : forcer une taille d’image très grande côté Divi

La correction qui a fonctionné consiste à forcer Divi à utiliser des dimensions énormes pour ses images de galerie.

Le principe est simple : si Divi demande une image “très grande”, WordPress n’a plus d’intérêt à livrer une miniature rognée. Il sert une version beaucoup plus complète, et la galerie conserve tout le contenu.

Code validé (à coller dans functions.php ou un plugin)

function custom_image_width($width) {
  return '9999';
}
function custom_image_height($height) {
  return '9999';
}
add_image_size( 'custom-image-size', 9999, 9999, array( 'center', 'center' ) );
add_filter( 'et_pb_gallery_image_width', 'custom_image_width' );
add_filter( 'et_pb_gallery_image_height', 'custom_image_height' );

Pourquoi cette solution marche

Cette solution agit avant l’affichage, au moment où Divi demande les images.

• Divi ne demande plus une taille de vignette “serrée”
• WordPress ne sert plus une miniature déjà recadrée
• la galerie affiche une image qui contient bien tout le visuel

Cela explique pourquoi un simple CSS n’a rien changé : la partie manquante n’était pas “cachée”, elle n’existait plus dans la miniature utilisée.

Comment tester proprement la correction

Après ajout du code, il faut valider de manière factuelle.

Étape 1 : vider les caches

Si le site utilise un cache (Divi, plugin, serveur, CDN), l’affichage peut rester identique malgré une correction.

Dans ce cas, le bon test est de vider les caches, puis de recharger la page.

Étape 2 : vérifier l’URL des images servies

Ouvrez l’inspecteur, sélectionnez une image de la galerie et regardez son src.

Avant correction, on voit souvent une miniature comme :

• …-400x516.png

Après correction, on doit plutôt voir une image plus grande, voire l’originale.

Étape 3 : vérifier le symptôme initial

Le test final reste visuel.

• aucun élément du logo n’est coupé
• les visuels sont entièrement visibles
• la galerie conserve une mise en page cohérente

Points d’attention : performance et taille des fichiers

Forcer 9999 x 9999 règle le rognage, mais peut entraîner un autre problème : des images plus lourdes à charger.

Sur une page avec plusieurs images, cela peut augmenter :

• le poids total de la page
• le temps d’affichage

Si l’objectif est de garder le “non recadrage” sans surcharger le site, une amélioration logique consiste à réduire cette valeur tout en restant suffisamment large.

Dans la discussion, seule la valeur 9999 a été validée. Toute optimisation chiffrée en dessous doit être testée sur votre cas.

Quand faire appel à un pro

Si votre galerie recadre les images malgré vos réglages, le diagnostic doit vérifier la source exacte du recadrage : CSS, structure du module, tailles WordPress, ou filtres Divi.

Pour remettre votre site d’aplomb sans perdre de données, demandez un dépannage WordPress prioritaire.

FAQ

Pourquoi mes images sont coupées dans une galerie Divi ?

Parce que Divi force souvent une taille de vignette pour uniformiser la grille. WordPress sert alors une miniature qui peut être recadrée.

Pourquoi le CSS ne suffit pas toujours à corriger le rognage ?

Quand l’image affichée est déjà une miniature recadrée, le navigateur ne peut pas “retrouver” la partie manquante.

Où mettre le code PHP de correction ?

Dans le fichier functions.php du thème enfant, ou dans un plugin dédié. L’important est qu’il soit chargé par WordPress.

Est-ce risqué de forcer des dimensions très grandes ?

Ce n’est pas “dangereux”, mais cela peut charger des images plus lourdes. Il faut surveiller la performance et ajuster si besoin.

Est-ce que cette solution marche sur toutes les galeries Divi ?

Elle agit sur les filtres de taille d’image utilisés par Divi. Si votre module utilise ces filtres, le résultat est similaire.