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

Posted 2023-05-07

【中文标题】Nivo Slider 自定义高度/宽度问题

【英文标题】：Nivo Slider custom height/width problems

【发布时间】：2015-09-02 13:04:43

【问题描述】：

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

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

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

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

【问题讨论】：

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

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

【讨论】：

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