angular-flexslider custom styles for displaying portrait and landscape images

gistfile1.txt

using-slider.jade
=======================================
.card.card-flex-slider.bgc-grey-50.m
flex-slider(slide='s in home.images', animation='slide')
li()
img.img-flex-slider(ng-src='{{s}}' )

styles.styl
=======================================
.flexslider
background-color #EEEEEE
border 0px
-webkit-border-radius 0px
-moz-border-radius 0px
border-radius 0px

.card-flex-slider
@media screen and (max-width: 450px) {
max-height 260px !important
}
@media screen and (max-width: 350px) {
max-height 220px !important
}

.flex-control-nav
@media screen and (max-width: 450px) {
visibility hidden
}

.img-flex-slider
padding 8px 0px
margin 0px auto
width auto !important
max-height 500px !important
@media screen and (max-width: 600px) {
max-height 400px !important
}
@media screen and (max-width: 450px) {
max-height 260px !important
}
@media screen and (max-width: 350px) {
max-height 220px !important
}