J'ai essayé de trouver comment centrer une image surdimensionnée dans un div en utilisant uniquement du css.
Nous utilisons une mise en page fluide, de sorte que la largeur des conteneurs d'images varie en fonction de la largeur de la page (la hauteur de la division est fixe). L'image se trouve à l'intérieur d'un div, avec un boxshadow inséré de manière à donner l'impression que vous regardez l'image à travers la page.
L'image elle-même a été dimensionnée de manière à remplir la division environnante dans sa plus grande largeur possible (la conception a une taille de max-width valeur).
C'est assez facile à faire si l'image est plus petite que le div qui l'entoure :
margin-left: auto;
margin-right: auto;
display: block; Mais lorsque l'image est plus grande que le div, elle commence simplement au bord gauche et est décentrée vers la droite (nous utilisons overflow: hidden ).
Nous pourrions attribuer un width=100% Mais les navigateurs n'arrivent pas à redimensionner les images et la conception du web est centrée sur des images de haute qualité.
Des idées pour centrer l'image de façon à ce que overflow:hidden coupe les deux bords de manière égale ?
