Maison > interface Web > tutoriel CSS > Comment puis-je centrer une image surdimensionnée dans une division à l'aide de CSS ?

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

Susan Sarandon
Libérer: 2024-11-01 09:30:30
original
460 Les gens l'ont consulté

How Can I Center an Oversized Image Within a Div Using 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal