Nivo滑块自定义高度/宽度问题

我已经寻找解决我的问题的方法，但尚未成功。

我有不同尺寸的图像Nivo Slider，但我需要创建一个viewport显示图像居中div。这很难解释，但我在下面附上了一张图表。

图像必须居中div，而div也必须反应灵敏。我不想要div更改其大小并希望图像创建一个overflow隐藏在div.

我尝试过不同的方法CSS and HTML，但这都不是我最大的优势。

如果我正确理解你想要实现的目标是这样的（取消注释/*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;这样您就可以看到图像的位置。