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

Question

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

htmlcsswordpressnivo-slider

5

我一直在寻找解决问题的方法，但至今未能成功。

我有不同大小的图像在Nivo幻灯片中，但我需要创建一个视口(viewport)来显示居中在一个div里的图像。很难解释，但我已经在下面包含了一张图示。

图像必须居中在div内，同时div还必须是响应式的。我不希望div改变其大小，并且想让图像在div上创建一个被隐藏的溢出(overflow)。

我已经尝试了不同的CSS和HTML方法，但它们都不是我的长项。

- Jamie Harding

1

你能提供你目前正在使用的HTML和CSS吗？ - Dan Hayden

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lmgonzalves · Accepted Answer

如果我理解正确，您想实现的是像这样的效果（取消注释/*overflow: hidden;*/）：演示 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;，这样你就可以看到图片的位置。