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