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

Question

我已经搜索了解决问题的方法,但还没有成功.

我有不同大小的图像Nivo Slider,但我需要创建一个viewport显示图像居中的图像div.这很难解释,但我在下面列出了一个图表.

图像必须以a为中心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;是为了让您可以看到图像的位置。