Nivo Slider 自定义 height/width 问题

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

Nivo Slider 自定义 height/width 问题

Nivo Slider custom height/width problems

html

css

wordpress

nivo-slider