html - Nivo Slider 自定义高度/宽度问题

Question

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

我在 Nivo Slider 中有不同大小的图像，但我需要创建一个 viewport 以 div 为中心显示图像。很难解释，但我在下面附上了一张图表。

图像必须在 div 中居中，而 div 也必须是响应式的。我不希望 div 更改其大小，并希望图像创建一个隐藏在 div 上的 overflow。

我尝试过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; 这样你就可以看到图像是如何定位的。