steuerkarussell bild höhe her verschiedene größe von bildschirmen

Question

ich arbeite mit ons karussell von onsen ui rahmen. Auf Karussell habe ich 3 Bilder mit 640x426 Dimensionen. Ich möchte die Fotos auf Karussell auf 100% der Größe unabhängig von der Bildschirmgröße des Geräts sehen. Mein Code ist:

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

i die Höhe auf 230px gesetzt, aber in einigen Geräten mit großer Leinwand des Bild ist nicht alles sichtbar .Wie dies zu kontrollieren? Danke im Voraus.

Answer 1

Sie haben feste Höhe verwendet, so dass es in großen Bildschirmen klein aussieht. Dafür müssen Sie die Fixhöhe nur in kleinen Geräten verwenden. Beachten Sie den folgenden Code: Hope it works for you.

---

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