Make the image slide in slider fit height and width in all screens

Ionic Framework ionic-v3
1

how to make the image that is inside the slide in ionic slider fit the height and width in all screens
i tried this code blow but in some devices like iPhone 5SE doesn’t work

                .slideroption{
                    max-width: 100%;
                    max-height: 100% !important;
                    border-radius: 5px;

                        .slide-zoom{
                            max-width: 100%;
                            max-height: 100% !important;
                            img{
                                max-width:100%;
                                max-height:100%;
                                border-radius: 5px;
                            }
                        }

                }

52%20PM 38%20PM

1 Like
2

For these cases the fastest way to find out is by inspectioning the element in a web browser since Ionic can sometimes fk u up putting some css classes without you noticing

3

i did that but nothing work .slideroption and .slide-zoom i got them by inspect element

4

try putting the !important in the widths and also in the img width and height

5

worked … thank you

                .slideroption{
                    // max-width: 100% !important;
                    // max-height: 100% !important;
                    border-radius: 5px;

                        .slide-zoom{
                                width:100% !important;
                                height:100% !important;
                            img{
                                width:100% !important;
                                height:100% !important;
                                border-radius: 5px;
                            }
                        }

                }
1 Like