Les images de mon site sont mal centrées

Par Big Ben Jr, il y a 4 ans

Les bases HTML/CSS

Bonjour,

Les images sur mon site web apparaissent mal centrées lorsqu'elles sont affichées sur des écrans de petite largeur:

https://math-coaching.com/fiche/construire-image-droite-symetrie-centrale-202

Une petite capture d'écran qui illuste le problème:
https://math-coaching.com/bug.png

L'espace à gauche de l'image est plus grand que l'espace à droite.

Ce décalage provient du fait que j'utilise pour mes images à la fois "box-sizing: content-box" et une bordure de 3px.

Le décalage correspond aux pixels de bordure "en trop" car si je désactive la bordure ou si je change "box-sizing: content-box" en "box-sizing: border-box" les images sont bien centrées.

Le problème c'est que cette dernière solution ne me satisfait pas car en passant en "border-box" l'affichage des images se compresse légèrement et il y a donc une perte de qualité visuelle. J'ai défini la largeur et la hauteur de toutes les images de mon site web par rapport à leur taille réelle. Une autre solution serait d'ajouter 6px à la largeur et hauteur de chacune de mes images mais ce serait long et fastidieux et surtout pas très pratique car ca voudrait dire que je devrais changer la largeur/hauteur de chaque image à chaque fois que je décide de par exemple changer la taille de la bordure.

Est-ce qu'il y aurait une solution pour centrer facilement mes images tout en gardant le "box-sizing: content-box" ?

Un grand merci pour votre aide, ça fait plusieurs heures que je me casse la tête et je ne trouve pas la solution...

4 réponses

MickaelTD, il y a 4 ans

Hello,

Sur tes images tu as une propriété css box-sizing: content-box passe la en border-box quand t'es dans les devices souhaités.

Et pareil pour t'es images de réseaux sociaux en bas change le padding: 0 15px en margin: 0 15px ce sera mieux à mon avis =) comme tu retire le content-box sur les elements img.
A la place de pad-0-15, il va probalement falloir une autre class mar-0-15 si tu as ou un truc comme ça, mais je penses qu'une class nommé t'aidera mieux.

img { box-sizing: content-box } .socialMedia { padding: 0 15px; } @media screen and (max-width : taValeurJusqu'ouSaDeconne) { img { box-sizing: border-box } .socialMedia { margin: 0 15px; } }
popotte, il y a 4 ans

Ironique pour un site sur la symétrie x'D

Maintenant pour une autre solution que le reglage du box-sizing...
Beh j'ai trouvé une solution, ne me demande pas pourquoi mais ça fonctionne :p tu passes le resp-ratio à 99%:

.resp-ratio { max-width: 100%; width: 99%; height: auto; }
Arzou, il y a 4 ans

Ou alors tu passes juste le box-sizing de ton image en border-box :)

img { box-sizing: border-box }
Big Ben Jr, il y a 4 ans

Un GRAND merci pour vos réponses !

Le problème avec le resp-ratio à 99% c'est que la qualité de l'image est légèrement dégradée lorsque l'image est censée s'afficher en taille réelle 100%.

Même chose lorsque je passe de content-box à border-box. La différence de qualité entre border-box et content-box est insignifiante lorsque les images sont déjà redimensionnées sur smartphone mais sur un écran d'ordinateur où les images sont censés s'afficher en taille réelle 100%, le fait qu'une image de 800px ne s'affichage qu'en max 796px par exemple, ça la rend direct un peu floue. Voir l'animation ci-dessous.

Content-box VS Boder-box

Une solution est en effet de jouer avec les media queries mais le problème c'est que le moment (en pixel) où je rencontre le problème de décentrage varie d'une image à l'autre. Il faudrait que je créé un media query pour chaque dimension d'image, ce n'est pas très pratique.

J'ai trouvé cette solution finalement:

.border-2-10-s { border:0; border-radius: 10px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12), 0 0 0 2px #000; /*remplace la bordure*/ }

La bordure est remplacée par un box-shadow, le résultat est identique mais plus de problème de centrage et je conserve la qualité au top en affichage 100% !