控制旋轉木馬圖像高度來自不同尺寸的屏幕

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; 
    } 
}