Carousel of images with different sizes

[Purus]

I am trying to use the carousel of images with different image sizes. With such images, the carousel does not look good.

I am not sure how this can be achieved.

Below is the fiddle I created for a basic demo.

http://jsfiddle.net/Purus/tsvpu9cs/

[bguyb]

I also need help with different size images

[bguyb]

If you don't mind to fix the size of the carousel you can use: .bgimage { text-align:right; color:white; background-size:auto; background-repeat:no-repeat; height: 100%; background-position: center center; } Its good enough for me.

[desenvolvedorindie]

O used:

<ul rn-carousel>
    <li ng-repeat="image in ad.images track by $index" rn-carousel-index="ad.carouselIndex">
        <div class="image-aspect-ratio">
            <img ng-src="{{image}}">
        </div>
    </li>
</ul>

css:

ul[rn-carousel] > li {
    position: relative;
    margin-left: -100%;
}
ul[rn-carousel] > li > .image-aspect-ratio {
    display: block;
    width: 100%;
    position: relative;
    height: 0;
    padding: 75% 0 0 0;
    overflow: hidden;
}

ul[rn-carousel] > li > .image-aspect-ratio img {
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
ul[rn-carousel] > li:first-child {
    margin-left: 0;
}