Comment puis-je centrer une image surdimensionnée dans une division à l'aide de CSS ?

Centrer une image surdimensionnée dans un div à l'aide de CSS

Lorsque vous travaillez avec une mise en page fluide où la largeur du div varie, centrer une image surdimensionnée dans un div peut être difficile. L'image peut commencer par le bord gauche, la laissant décentrée vers la droite.

Pour résoudre ce problème, nous proposons une solution CSS qui centre efficacement l'image, créant une coupure de débordement uniforme sur les deux bords :

<code class="css">.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}</code>

Le div parent établit un positionnement relatif et contient le débordement. Le div enfant, qui contient l'image, a un positionnement absolu avec des valeurs supérieure, inférieure, gauche et droite extrêmement négatives. Ces valeurs négatives poussent effectivement l'image au-delà de la zone visible du div. La propriété margin: auto assure le centrage automatique de l'image dans le div parent.

Cette technique permet à l'image de conserver son rapport hauteur/largeur d'origine, éliminant ainsi tout problème de redimensionnement imposé par le navigateur qui pourrait compromettre la qualité de l'image. Le résultat est une image surdimensionnée centrée avec débordement et uniformément recadrée des deux côtés.

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!