Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen- Carousel height depends from image height



  • i use the onsen carousel to show 3 photos every time. I would like to see the photos on carousel on 100 % of the size independent of the device screen size. My code is :

    <ons-carousel  style="height:230px;" swipeable overscrollable auto-scroll auto-refresh  auto-scroll-ratio="0.2" var="carousel">
                    
    <ons-carousel-item ng-repeat="Diamoni_image in DiamoniImagesArray | startFrom : 1" >
    
       <img src="{{Diamoni_image.path}}" style="width:100%; height:auto;">
                   
     </ons-carousel-item>
    <ons-button style="margin-top:25%;  background-color: rgba(25, 142, 187, 0.5); float:right" ng-click="carousel.next()">
                        <ons-icon icon="fa-arrow-right"></ons-icon>
    
                    </ons-button>
                    <ons-button style="margin-top:25%;  background-color: rgba(25, 142, 187, 0.5); float:left" ng-click="carousel.prev()">
                        <ons-icon icon="fa-arrow-left"></ons-icon>
                    </ons-button>
                </ons-carousel>
    

    i set the height at 230px but in some devices the picture is not all visible . How to control this? Thanks in advance.


  • Onsen UI

    @koundou Are you perhaps looking for fullscreen attribute?



  • @Fran-Diox
    Thanks for the answer. No the carousel and the image also i do not want to cover the whole of screen but cover the screen that is the height of the image. For example if the image height is 200px i want the carousel cover only 200px of the screen and the image show 100% of the size in all different size of device screen.