Comment centrer des images surdimensionnées dans une division en utilisant CSS ?

Centrage d'images surdimensionnées dans un div avec CSS

Lorsqu'il s'agit d'une mise en page fluide où les largeurs de conteneurs varient, centrer une image surdimensionnée dans un div peut être difficile d'utiliser CSS seul. Le comportement par défaut des images plus larges que leur conteneur est de s'aligner à gauche, en les laissant décalées vers la droite.

Pour résoudre ce problème, une solution reposant uniquement sur CSS peut être implémentée. Voici comment :

Attribuez la propriété CSS aux divs parents :

<code class="css">position: relative;
overflow: hidden;</code>

Cela définit le div comme un conteneur pour le positionnement et limite tout contenu débordant.

Pour l'image surdimensionnée (appelé « enfant »), utilisez le CSS suivant :

<code class="css">position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;</code>

• Position : Absolue : Sort l'image du flux normal de documents.
• Coordonnées négatives : Étend l'image au-delà des limites du div dans toutes les directions. Ceci est crucial pour le placement.
• Marges automatiques : Centre l'image dans le div parent.

En utilisant ces propriétés CSS, l'image surdimensionnée sera placée au centre de son div parent, quelle que soit sa taille ou la largeur du parent. Les coordonnées négatives garantissent que le débordement est coupé uniformément sur les deux bords, offrant ainsi un résultat visuellement agréable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!