Centrare grandi immagini verticalmente in un div più piccolo

Question

Ho un problema che mi sta facendo impazzire. Ho un piccolo div che contiene un'immagine più grande (senza dimensione fissa)

Im prendendo questa immagine più grande e dandogli una larghezza del 100% per ridimensionare per adattarsi ai limiti dei riquadri, ma ho bisogno dell'immagine per mostrare verticalmente centrato all'interno del div piuttosto che solo verso il basso.

C'è una soluzione CSS semplice per questo? Ho cercato, ma non ho avuto molta fortuna.

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

Answer 1

senza sapere di più circa il tuo problema, ci sono molti modi si potrebbe avvicinarsi.

Molto probabilmente, se si imposta l'immagine come sfondo del div (invece di inserirlo nell'HTML), risolverà il problema;

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

Un altro metodo che mi piace è quello di utilizzare position:absolute per posizionare l'immagine esattamente dove voglio.

Inoltre, se si intende utilizzare un metodo con vertical-align: middle, assicurarsi di applicarlo all'immagine, non al div contenitore.

Answer 2

Mi piacerebbe provare questo 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

Suggerirei di incollare l'immagine in un div e quindi di centrare il div. C'è una descrizione dettagliata su come fare questo diritto here.