Landscape και portrait εικονες σε bootstrap carousel

[slevinkelevra]

Καλησπερα

Χρησιμοποιω το ng-carousel το οποιο δουλευει με την angular 6. Ολα τα components του περνουν το στιλ τους απο το bootstrap css . Αν βαλω μια landscape εικονα στο carousel ολα ειναι οκ. Αν βαλω μια portrait τοτε το width ειναι οκ, αλλα η εικονα διατηρει το original height , οποτε δε προσαρμοζεται μεσα στα πλαισια του carousel. 

Ψαχνωντας λιγο το css απο το παραδειγμα του παραπανω link , το στιλ της καθε εικονας στο carousel ειναι
 

  ngb-carousel .carousel-item img{
      width: 100%;
      height: auto;          
      vertical-align: middle;
  }

το οποιο δημιουργει και το προβλημα. Ενα max height θα ελυνε το θεμα,  πχ

  ngb-carousel .carousel-item img{
    width: auto;
    height: 100%;
    vertical-align: middle;
    max-height: 620px;
  }

αλλα αυτο δεν ειναι responsive και πρεπει να ορισεις παρα πολλα breaking points για το max-height με κινδυνο παντα να μη δειχνει κατι καλα, αναλογα με την εικονα.

Εχετε καποια προταση? 

Επισης δε θα πρεπε το carousel να φτιαχνει τετοια προβληματα μονο του ? Αλλιως τι νοημα εχει ?

 

Ευχαριστω

[alou]

Να βάλεις max-height σε vh. 100vh = 100% του viewport height.

[slevinkelevra]

Καλη προταση. Σωστος. Βαζω 

.carousel-item{  /*this contains the ngb-carousel .carousel-item img*/
  width: 100%;	
	height: 50vh;
}
  ngb-carousel .carousel-item img{
      width: auto;    
      max-height: 100%;           
      vertical-align: middle;
  }

Τα βασικα θεματα ειναι και παλι πρεπει να εχεις breaking points, φανταζομαι ομως οτι πρεπει να ειναι πολυ λιγοτερα. Ηθελα μια λυση που να στεκει μονη της, χωρις να θελει breaking points. Αν εχεις breaking points τοτε ολο και καποια εικονα θα σου ξεφυγει και δε θα κατσει καλα ή κατα λαθος θα γινει crop. Any how αν δεν υπαρχει αλλη λυση θα συνεχισω με αυτο

Επισης πως θα μπορουσα να κεντραρω τις portrait ή μικροτερες landscape? Αν ειχα την εικονα ως background θα ειχα πιο πολυ ελευθερια χειρισμου της θεσης της , αλλα το bootstarp στην html δομη του δηλωνει ξεκαθαρα img tag. Αυτο ψαχνω τωρα. Αν εχεις καποια ετοιμη συνταγη, πες

Thanks και παλι. 

Nevermind για το κεντραρισμα

 

.carousel-item{  
  width: 100%;	
	height: 50vh;
}
  ngb-carousel .carousel-item img{
      width: auto;    
      max-height: 100%;           
      
      display: block;
      margin-left: auto;
      margin-right: auto;

  }

Τα Breaking points για το height με αγχωνουν λιγο, αλλα θα δουμε, οτι ειναι θα σου πω