Nivo Slider custom height/width problems

Question

Ho cercato una soluzione al mio problema, ma non ho ancora avuto successo.

Ho immagini di diverse dimensioni in Nivo Slider, ma ho bisogno di creare un viewport che visualizza l'immagine centrata in un div. È difficile da spiegare, ma ho incluso un diagramma qui sotto.

L'immagine deve essere centrata in un div, mentre lo div deve anche essere reattivo. Non voglio che lo div cambi le sue dimensioni e vorrei che l'immagine crei un overflow nascosto su div.

Ho provato diversi metodi di CSS e HTML, ma nessuno dei due sono i miei più grandi punti di forza.

Answer 1

Se ho capito bene quello che si vuole raggiungere è qualcosa di simile (decommentando /*overflow: hidden;*/): DEMO

HTML:

<div> 
    <img src="http://i.imgur.com/cjgKmvp.jpg"/> 
</div> 

CSS:

div{ 
    position: relative; 
    margin: 100px auto; 
    width: 400px; 
    height: 300px; 
    border: 3px solid red; 
    /*overflow: hidden;*/ 
} 

img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
} 

Nota : Commento overflow: hidden; quindi c un vedere come viene posizionata l'immagine.