Centrer de grandes images verticalement dans un div plus petit

Question

J'ai un problème qui me rend un peu fou. J'ai une petite div qui contient une plus grande image (sans dimension fixe)

En prenant cette image plus grande, et en lui donnant une largeur de 100% à l'échelle pour s'adapter à l'intérieur des limites des boîtes, mais j'ai besoin de l'image pour se montrer verticalement centré à l'intérieur de la div plutôt que juste de haut en bas.

Y at-il une solution CSS facile pour cela? J'ai été fouiller autour, mais ne pas avoir beaucoup de chance.

Currently: Intended: 
--------  -------- 
| div /w | |overflow| 
| image |  --------  
--------  | div w/ | 
|overflow| | image | 
| image |  -------- 
--------  |overflow| 
       -------- 

Answer 1

Sans en savoir plus sur votre problème, il y a beaucoup de façons dont vous pouvez l'aborder. Très probablement, si vous définissez l'image comme arrière-plan de la div (au lieu de le placer dans le code HTML), cela résoudra votre problème;

div {background: url(image.png) center center no-repeat;} 

Une autre méthode que j'aime est d'utiliser position:absolute pour positionner l'image exactement où je veux.

En outre, si vous allez utiliser une méthode avec vertical-align: middle, assurez-vous que vous appliquez cela à l'image, pas à la div.

Answer 2

Je vais essayer ce CSS:

div.container { width: ?px; height: ?px; overflow: hidden; position: relative; } 
div.container img { position: absolute; top: (-50% of image height); left: (-50% of image width); } 

Answer 3

Je suggérerais de coller l'image dans un div puis de centrer la div. Il y a une description détaillée sur comment faire ceci droit here.