控制旋转木马图像高度来自不同尺寸的屏幕

Question

我使用onsen ui框架的ons旋转木马。在旋转木马上，我有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; 
    } 
}