コントロールカルーセル画像の高さが異なるため画面の高さが異なる

Question

私はonsen UIフレームワークのオンカルーセルで作業します。カルーセルには640x426の3つの画像があります。私は、デバイスの画面サイズに関係なく、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で高さを設定するが、大画面と一部のデバイスに画像がこれを制御するために、すべての可視.Howではないでしょうか？前もって感謝します。

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