Onsen- Carousel height depends from image height

koundou

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.

Fran Diox

@koundou Are you perhaps looking for fullscreen attribute?

koundou

@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.