Question

我使用温泉ui框架的ons carousel。在旋转木马上我有3张640x426尺寸的图像。我希望在旋转木马上看到100％大小的照片，与设备屏幕尺寸无关。我的代码是：

<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}}">
            </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>

我将高度设置为230px，但在某些大屏幕设备中，图片并非全部可见。如何控制？提前谢谢。

Answer 1

你使用了修复高度，因此在大屏幕中它看起来很小。为此，您只需要在小型设备中使用修复高度。请参阅以下代码，希望它适合您。

<ons-carousel class="ons" 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}}">
</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>

<强> CSS

@media (max-width: 768px){ 
    .ons{
        height:230px;
    }
}

控制旋转木马图像高度不同大小的屏幕

1 个答案: