web-dev-qa-db-fra.com

Centrer une grande image de taille inconnue dans un div plus petit avec le dépassement de capacité masqué

Je voudrais centrer un img dans une div sans javascript et sans images de fond.

Voici un exemple de code

<div> 
    <img src="/happy_cat.png"/> 
</div>
  • Je ne connais pas la taille de l'img et il devrait pouvoir dépasser la largeur du parent
  • Je ne connais pas la largeur du div parent (c'est 100%)
  • Le parent div a une hauteur fixe
  • L'image est plus grande que le parent et le parent a débordé: hidden
  • Seulement besoin de supporter les navigateurs modernes

Résultat désiré. (Ignorer les opacités, etc., notez simplement le positionnement).

enter image description here

Je sais que cela peut être fait facilement avec des images de fond, mais ce n'est pas une option pour moi. Je pourrais aussi utiliser du javascript, mais cela semble être une façon très lourde de parvenir à cela.

Merci!

Jack

htmlcsscss3
71
JackMahoney

Et ça:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

Cela suppose que la division parent est positionnée relativement. Je pense que cela fonctionne si vous voulez que le .img soit positionné plutôt qu'absolument. Retirez simplement le position: absolute et changez en haut/à gauche pour margin-top et margin-left.

Vous voudrez probablement ajouter un support de navigateur avec transform, -moz-transform etc.

95
Evan Layman

Ancienne question, nouvelle réponse:

Lorsque l'image est plus grande que la division d'emballage, un alignement de texte: centre ou marge: auto ne fonctionnera pas. Mais si l'image est plus petite, les solutions avec positionnement absolu ou avec une marge gauche négative vont produire des effets étranges.

Ainsi, lorsque la taille de l'image n'est pas connue à l'avance (comme sur un CSM) et qu'elle peut être plus grande ou plus petite que la division d'habillage, il existe une solution CSS3 élégante qui répond à tous les besoins:

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

Notez que, selon les autres règles de votre feuille de style, vous devrez peut-être ajouter width: auto et/ou max-width: none à img.

44
RavanH

Merci à tous pour votre aide. Je vais considérer ceci irréalisable en CSS uniquement.

Je vais passer à une solution jQuery. Voici quelques [pseudo] codes pour ceux que ça intéresse.

J'allais abandonner une solution CSS, mais il semble que cela puisse être fait (voir la réponse acceptée). Voici la solution JS que j'allais utiliser.

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

Et le css qui l'accompagne

img{
  position:absolute;
  left:50%;
}
2
JackMahoney

C'est toujours un peu délicat et il existe de nombreuses solutions. Je trouve que la meilleure solution est la suivante. Cela le centre à la fois verticalement et horizontalement.

[~ # ~] css [~ # ~] 

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

[~ # ~] html [~ # ~] 

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

Voir le violon

technique légèrement différente: Fiddle

2
bicycle

Je sais que c’est vieux, mais j’ai aussi mis au point une solution pure en CSS, très semblable à la précédente.

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}
2
Anything Graphic

Il suffit d’initialiser la position de votre image comme suit.

HTML:

<div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

CSS:

#img {
    left: 0;
    right: 0;
}

Ou regarde avec un margin: auto;

Ceci est pour aligner horizontalement. Pour l'aligner verticalement aussi, vous pouvez faire un display: table-cell; à ton <div> un puis vertical-align: middle; mais ce n'est pas une bonne pratique parce que votre <div> n'est pas une table.

1
Emilie