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

【问题标题】：Nivo Slider custom height/width problemsNivo Slider 自定义高度/宽度问题
【发布时间】：2015-09-02 13:04:43
【问题描述】：

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

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

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

我尝试了CSS 和HTML 的不同方法，但都不是我最大的优势。

【问题讨论】：

能否提供您当前使用的 HTML 和 CSS。

标签： html css wordpress nivo-slider

【解决方案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;，以便您查看图像的位置。

【讨论】：

抱歉这么晚回复，这正是我要找的，谢谢。我现在会测试一下，然后再回复你。