Nivo Slider пользовательские проблемы с увеличением/шириной

Question

Я искал решение моей проблемы, но еще не достиг успеха.

У меня есть изображения разных размеров в Nivo Slider, но мне нужно создать viewport, который отображает изображение с центром в div. Трудно объяснить, но я включил диаграмму ниже.

Изображение должно быть центрировано в div, в то время как div также должно быть отзывчивым. Я не хочу, чтобы div изменил свой размер и хотел, чтобы изображение создало overflow, которое скрыто на div.

Я пробовал различные методы CSS и HTML, но ни мои самые сильные стороны.

Answer 1

Если я правильно понимаю, что вы хотите достичь что-то вроде этого (раскомментировав /*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; 
} 

Примечание : Я комментирую overflow: hidden;, поэтому вы c Посмотрите, как изображение позиционируется.