Change height of Slick Carousel

Question

Here is a fiddle of Slick Carousel embedded in a Bootstrap thumbnail.

JSFiddle

How can I make the carousel only 200px tall and ensure that the images are scaled proportionally? I can't seem to get the carousel to fit inside a container who's height I dictate.

NOTE: Resize your browser after loading this fiddle! This works around a known bug where the plugin layout is not initializing on page load. This is not the issue I'm needing solved. Ignore this issue.

HTML

<div ng-app="slickExampleApp" class="background">
    <div ng-controller="SlickCtrl">
        <div class="inner-container row">
            <div class="thumbnail col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                <div ng-repeat="result in results">
                        <slick-carousel
                                    settings="slickConfig"
                                    media="result.images">
                            </slick-carousel>

                        <div class="row">
                            <div class="caption">
                            <h4 class="heading">{{result.heading}}</h4>
                            <p class="body">{{result.body}}</p>
                            <p class="text-center">
                                <a href="#" class="btn btn-default btn-lg" role="button">Place Offer</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS

var app = angular.module('slickExampleApp', ['slick']);

app.controller('SlickCtrl', function ($scope) {

        $scope.slickConfig = {
            dots: true,
            lazyLoad: 'progressive',
            infinite: true,
            speed: 100,
            slidesToScroll: 1,
            //adaptiveHeight: true,
            //TODO: Track this bug to allow for variableWidth on next release: https://github.com/kenwheeler/slick/issues/790
            variableWidth: true,
            onInit: function () {
                jQuery(window).resize();
                console.log('slickcaroseal locded');
            },
            centerMode: true

        };


        $scope.results = [
                {
                    "annotations": {
                        "latlong_source": "In Posting",
                        "proxy_ip": "107.191.98.50:22225",
                        "source_account": "[email protected]",
                        "source_cat": "sss",
                        "source_continent": "USA",
                        "source_heading": "\" Kennedy Machinists 8 Drawer Roller Cabinet,  Kennedy Combination Set",
                        "source_loc": "sfbay",
                        "source_map_google": "https://maps.google.com/maps/preview/@37.759300,-122.483600,16z",
                        "source_map_yahoo": "http://maps.yahoo.com/#mvt=m&lat=37.759300&lon=-122.483600&zoom=16",
                        "source_neighborhood": "inner sunset / UCSF",
                        "source_state": "California",
                        "source_subcat": "tla|tls",
                        "source_subloc": "sfc"
                    },
                    "body": "\n \" Kennedy Machinists 8 Drawer Roller Cabinet, and Kennedy Combination and Machinist Chest Set with keys\".\nVery good condition. Asking Whole set for $875 or Best Offer (REASONABLE!!!!!).\nPlease email with your contact phone number if you are interest and SERIOUS buyer. Thanks.\n ",
                    "category": "STOO",
                    "category_group": "SSSS",
                    "external_id": "4822965821",
                    "external_url": "http://sfbay.craigslist.org/sfc/tls/4822965821.html",
                    "heading": " Kennedy Machinists 8 Drawer Roller Cabinet,  Kennedy Combination Set",
                    "images": [
                        {
                            "full": "http://images.craigslist.org/00707_cwYj2bMonC8_600x450.jpg"
                        },
                        {
                            "full": "http://images.craigslist.org/00w0w_8b36BjRL4YM_600x450.jpg"
                        },
                        {
                            "full": "http://images.craigslist.org/00U0U_6MKF9DWjRfM_600x450.jpg"
                        },
                        {
                            "full": "http://images.craigslist.org/00d0d_4bX1cj3aIrf_600x450.jpg"
                        },
                        {
                            "full": "http://images.craigslist.org/00B0B_8i444xC2DKt_600x450.jpg"
                        },
                        {
                            "full": "http://images.craigslist.org/00F0F_1CnjxJRlvXt_600x450.jpg"
                        }
                    ],
                    "location": {
                        "accuracy": 8,
                        "city": "USA-SFO-SNF",
                        "country": "USA",
                        "county": "USA-CA-SAF",
                        "geolocation_status": 3,
                        "lat": "37.7593",
                        "locality": "USA-SFO-OUS",
                        "long": "-122.4836",
                        "metro": "USA-SFO",
                        "region": "USA-SFO-SAF",
                        "state": "USA-CA",
                        "zipcode": "USA-94122"
                    },
                    "price": 875,
                    "source": "CRAIG",
                    "timestamp": 1419808764
                }
            ];

});




//Custom implementation of https://github.com/kbdaitch/angular-slick-carousel
//Var needed for slick carousel directives below.
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };


app.directive('onFinishRender', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                return scope.$evalAsync(attr.onFinishRender);
            }
        }
    };
});

app.directive('slickCarousel', [
    '$timeout', '$templateCache', function($timeout, $templateCache) {
        var SLICK_FUNCTION_WHITELIST, SLICK_OPTION_WHITELIST, isEmpty;
        $templateCache.put('angular-slick-carousel/template.html', "<div class=\"multiple\" ng-repeat=\"m in media\" on-finish-render=\"init()\">\n  <img ng-if=\"isImage({media: m})\" data-lazy=\"{{m.full || m.thumb || m.images}}\"/>\n  <video ng-if=\"isVideo({media: m})\" ng-src=\"{{m.src}}\" type=\"{{m.mimeType}}\" ></video>\n</div>");
        SLICK_OPTION_WHITELIST = ['accessiblity', 'autoplay', 'autoplaySpeed', 'arrows', 'cssEase', 'dots', 'draggable', 'fade', 'easing', 'infinite', 'lazyLoad', 'onBeforeChange', 'onAfterChange', 'pauseOnHover', 'responsive', 'slide', 'slidesToShow', 'slidesToScroll', 'speed', 'swipe', 'touchMove', 'touchThreshold', 'vertical'];
        SLICK_FUNCTION_WHITELIST = ['slickGoTo', 'slickNext', 'slickPrev', 'slickPause', 'slickPlay', 'slickAdd', 'slickRemove', 'slickFilter', 'slickUnfilter', 'unslick'];
        isEmpty = function(value) {
            var key;
            if (angular.isArray(value)) {
                return value.length === 0;
            } else if (angular.isObject(value)) {
                for (key in value) {
                    if (value.hasOwnProperty(key)) {
                        return false;
                    }
                }
            }
            return true;
        };
        return {
            scope: {
                settings: '=',
                control: '=',
                media: '=',
                onDirectiveInit: '&',
                isImage: '&',
                isVideo: '&'
            },
            templateUrl: function(tElement, tAttrs) {
                if (tAttrs.src) {
                    return tAttrs.src;
                }
                return 'angular-slick-carousel/template.html';
            },
            restrict: 'AE',
            terminal: true,
            link: function(scope, element, attr) {
                var options;
                if (typeof attr.isImage !== 'function') {
                    scope.isImage = function(params) {
                        //TODO: Should evaluate mimetype of image.. grrrr
                        //Here is original code
                        //return params.media.mimeType === 'image/png' || params.media.mimeType === 'image/jpeg';
                        return true;
                    };
                }
                if (typeof attr.isVideo !== 'function') {
                    scope.isVideo = function(params) {
                        return params.media.mimeType === 'video/mp4';
                    };
                }
                options = scope.settings || {};
                angular.forEach(attr, function(value, key) {
                    if (__indexOf.call(SLICK_OPTION_WHITELIST, key) >= 0) {
                        return options[key] === scope.$eval(value);
                    }
                });
                scope.init = function() {
                    var slick;
                    slick = element.slick(options);
                    scope.internalControl = scope.control || {};
                    SLICK_FUNCTION_WHITELIST.forEach(function(value) {
                        scope.internalControl[value] = function() {
                            slick[value].apply(slick, arguments);
                        };
                    });
                    scope.onDirectiveInit();
                };
            }
        };
    }
]);

Answer 1

Answer:

CSS

.slick-slide {
   height:200px;
}

.slick-slide img {
   height:200px;
}

Answer 2

I was having to set the height eg .slick-carousel{width: 200px;} because adaptive height wasnt working and slick was making the carousel as tall as the imgs (before it was resized by css). but after messing around with it for a while. this is what works for me.

    .slick-slide{
        display: none;
        float: left;
        height: auto;
        min-height: 1px;
        img{
            max-width: 100vw !important; 
        }
    }