Centrer une grande image de taille inconnue à l’intérieur d’un div plus petit avec un débordement caché

Et ça:

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

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

Vous voudrez probablement append la prise en charge du navigateur avec transform , -moz-transform etc.

Ancienne question, nouvelle réponse:

Lorsque l’image est plus grande que le div wrapping, un text-align: center ou margin: auto ne fonctionne pas. Mais si l’image est plus petite, alors les solutions avec un positionnement absolu ou une marge gauche négative vont produire des effets étranges.

Ainsi, lorsque la taille de l’image n’est en fait pas connue à l’avance (comme sur un CSM) et qu’elle peut être plus grande ou plus petite que le div enveloppant, il existe une solution CSS3 élégante qui remplit tous les objectives:

 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 append la largeur: auto et / ou max-width: none à l’img.

C’est toujours un peu délicat et les solutions sont nombreuses. Je trouve la meilleure solution pour être le suivant. 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

Voir le violon

technique légèrement différente: violon

Merci à tous pour votre aide. Je vais considérer cela comme impossible en CSS uniquement.

Je vais passer à une solution jQuery. Voici un code [pseudo] pour les personnes intéressées.

J’étais sur le point d’abandonner une solution CSS, mais cela semble possible (voir la réponse acceptée). Voici la solution JS que j’allais suivre.

 var $img = $('img'), w = $img.width(); $img.css({marginLeft: -w}); 

Et le css d’accompagnement

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

Je sais que c’est vieux, mais j’ai aussi trouvé une solution CSS très similaire à celle ci-dessus.

 .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; } 

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

HTML:

CSS:

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

Ou regardez avec une margin: auto;

C’est pour l’alignement horizontal. Pour l’aligner verticalement aussi, vous pouvez faire un display: table-cell; à votre

puis vertical-align: middle; mais ce n’est pas une bonne pratique car votre

n’est pas une table.