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

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;发表评论，以便您了解图片的定位方式。