nivo slider image resize issue

Question

I have nivo slider in my web page. I need to display images of various width and height.The larger image displays behind the smaller image. Please refer the following screenshot.

enter image description here

I have to remove displaying larger image behind the small image. Is there any possibility to do it with nivo slider?

As I know, nivo slider needs images to be same sized. The sizes are mentioned in the css file. — Vinay, May 29 '12 at 09:56
The images are coming from back end and i shouldn't mention the sizes. — designersvsoft, May 29 '12 at 09:58

score 10 · Answer 1 · answered Jul 06 '12 at 10:46

10

I used this and it's worked :)

.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    width: 556px;
    height: 183px !important;
}

answered Jul 06 '12 at 10:46

Hoang Tran

101
3

How could I resize the image with 100% width and height? I set width: 100% but couldn't work. – Navin Rauniyar Jul 03 '13 at 09:31

score 3 · Answer 2 · answered Jun 24 '12 at 17:53

3

add this

<style>
    .slider-wrapper,.nivoSlider , img{
        width:500px;
        height:200px;
        margin-bottom:0px !important;
        border-radius:10px;
    }
</style>

answered Jun 24 '12 at 17:53

NassimPHP

1,036
10
11

score 0 · Answer 3 · answered Mar 22 '13 at 05:52

0

.theme-navigation-inside .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    height: auto;
}

I fhound this took care of the problem

answered Mar 22 '13 at 05:52

PCTech

1

nivo slider image resize issue

3 Answers3