Nivo Slider自定义高度/宽度问题 [英] Nivo Slider custom height/width problems

问题描述

我已搜索解决我的问题，但尚未成功。

I have searched for a resolution to my problem, but have not yet been successful.

我在中有不同大小的图片Nivo Slider ，但我需要创建一个视口，显示以 div 为中心的图像。

I have images of different sizes in Nivo Slider, but I need to create a viewport that displays the image centered in a div. It's hard to explain, but I have included a diagram below.

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

The image must be centered in a div, while the div must also be responsive. I don't want the div to change its size and would like the image to create an overflow that is hidden on the div.

我尝试了 CSS

推荐答案

如果我正确理解你的想要实现的是这样的东西（取消注释 / * overflow：hidden; * / ）： DEMO

If I understand correctly what you want to achieve is something like this (uncommenting /*overflow: hidden;*/): DEMO

HTML
$ b

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： code>，以便您可以看到图像的位置。

Note: I comment overflow: hidden; so you can see how the image is positioned.

这篇关于Nivo Slider自定义高度/宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！