Comment centrer une image () dans le conteneur de largeur de fluide

Comment puis-je faire en sorte qu’une image rest centrée lorsque le conteneur de largeur de fluide (en pourcentage) est trop petit pour afficher l’image entière?

entrer la description de l'image ici

Comment puis-je centrer l’image à l’intérieur de son conteneur?

Cela signifie qu’il devrait afficher le milieu de l’image au lieu des côtés lorsque le conteneur est trop petit.

Quand ça marche

Vous pouvez avoir un conteneur qui contient un contenu tel que deux

qui sont chacun 50% plus larges, assis l’un à côté de l’autre. Pour cet exemple, nous pouvons illustrer un seul enfant du conteneur: entrer la description de l'image ici

Nous .container rectangle externe .container , le rectangle interne .content et l’image img . Cet arrangement est parfaitement .content tant que le .content est toujours plus large que img .

Quand ça casse

Comme nous traitons des pourcentages et que nous travaillons probablement avec un design réactif, cela peut ne pas toujours être le cas. Si .content est plus fin que img , le recadrage se produira:

entrer la description de l'image ici

Le problème

Si la partie la plus intéressante de img trouve au centre, nous devons faire en sorte que le navigateur recoupe les deux bords de manière uniforme, en laissant la meilleure partie visible, quelle que soit la largeur de .content .

entrer la description de l'image ici

La solution

Heureusement, une solution est possible. Mieux encore, aucun balisage supplémentaire n’est requirejs.

 .content { width: 90%; /* or whatever is required */ text-align: center; /* ensures the image is always in the h-middle */ overflow: hidden; /* hide the cropped portion */ } img { position: relative; /* allows repositioning */ left: 100%; /* move the whole width of the image to the right */ margin-left: -200%; /* magic! */ } 

Pour les nouveaux navigateurs, vous pouvez le traduire

 figure{ width: 100%; text-align: center; overflow: hidden; } img{ position: relative; left: 50%; transform: translate(-50%,0) } 

Pour supporter IE8, vous pouvez toujours utiliser la technique présentée ci-dessus par @BryceHanscomb.

 .no-csstransforms figure img { left: 100%; /* move the whole width of the image to the right */ margin-left: -200%; /* magic! */ } 

Si vous prévoyez que l’image à afficher sera beaucoup plus longue que le conteneur d’affichage, paramétrez à gauche: 100%; et marge à gauche: -200%; (d’après la réponse de Bryce) pourrait ne pas être suffisant pour obtenir la partie centrale de l’image. Juste mettre un plus grand pourcentage pour les deux. Assurez-vous que l’autre est la moitié de l’autre si.

 left: 500%; margin-left: -1000%;