Les images de mon site sont mal centrées
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
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;
}
}
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;
}
Ou alors tu passes juste le box-sizing de ton image en border-box :)
img {
box-sizing: border-box
}
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.
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% !