web-dev-qa-db-fra.com

Comment recadrer une image (<img>) dans un conteneur de largeur fluide

Comment faire en sorte qu'une image reste centrée lorsque son conteneur de largeur de fluide (en pourcentage) est trop petit pour afficher l'image entière?

enter image description here

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

Cela signifie que le milieu de l'image devrait apparaître au lieu des côtés lorsque le conteneur est trop petit.

cssimageresponsive-designfluid-layoutfluid-images
50
Bryce

Quand ça marche

Vous pouvez avoir un conteneur qui contient du contenu, tel que deux <div> D'une largeur de 50% chacun, assis l'un à côté de l'autre. Pour cet exemple, nous pouvons illustrer un seul enfant du conteneur: enter image description here

Nous nommerons le rectangle extérieur .container, Le rectangle intérieur .content Et l'image img. Cet arrangement est parfaitement correct, tant que .content Est toujours plus large que img.

Quand ça casse

Puisque nous avons affaire à 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 aura lieu:

enter image description here

Le problème

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

enter image description here

La solution

Heureusement, une solution est possible. Mieux encore, aucun balisage supplémentaire n'est requis.

.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! */
}
98
Bryce

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! */
}
19
Gabriela Gabriel

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

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