CODEWITHSUNDEEP
angularjscordovaionic-framework
Ranjit
Ranjit

Reputation: 106

Ionic slider with different image size or heights

I'm using ion-slide-box, but the issue is, my ion-slides image is not in the same size, its dynamically repeated different size image using ng-repeat 

                    <ion-slide ng-repeat="sliderimages in sliderimages">
                        <img src={{sliderimages.url}} style="width:100%;height:auto;"/>
                    </ion-slide>
                </ion-slide-box>

I used this CSS to fit image height to all

.slider {
  height: 200px;
  width:100%;
}
.slider-slide {
  color: #000;
  background-color: #fff;
  height: 100%;
  width:100%;
}

but the height is not so fitfit image

space in above

I have to add any size of images and that to be fit in the Ionic slider.

Upvotes: 5

Views: 9965

Answers (2)

user751344
user751344

Reputation: 41

max-width: 100vw !important;
max-height: 100vh !important;

this worked for me ;-)

Upvotes: 3

Hardik Vaghani
Hardik Vaghani

Reputation: 2173

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Example: http://jsfiddle.net/xwrvxser/1/

Regards.

Upvotes: 1

Related Questions