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.

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

Matt

As I know, nivo slider needs images to be same sized. The sizes are mentioned in the css file. – Compurgation

The images are coming from back end and i shouldn't mention the sizes. – Matt

Answer 1

I used this and it's worked :)

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

Trophoblast

How could I resize the image with 100% width and height? I set width: 100% but couldn't work. – Eger

Answer 2

add this

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

Licit

Answer 3

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

I fhound this took care of the problem

Flowerless