How to make the "Height" of Views Slideshow Fully responsive?

Question

I'm working on a slideshow on Drupal 7 with Views Slideshow. The only issue I have right now is to make the Frame "Height"(not the image) responsive when resizing the browser. I found many articles, questions and answers about how to make Views Slideshow responsive, but none of them work properly. I believe the "Frame" is causing this.

These articles I found does not really fix the height of Views Slideshow. Maybe I missing something.
- Make views slideshow responsive - remove inline styles
- Can't remove the height/width of the slide container

----- updated for @Patrick Ryan

I got some error from google chrome web browser after adding these js

----- updated on Aug. 20, 2014 @ 9:46am
I found the following script also fix the height. Its from drupal.org issue views Slideshow for Responsive design on #26

$(window).resize(function(){
  $('.views_slideshow_cycle_main').each(function(){
    var cycleMain = $(this);
    var img_width = 0,
        img_height = 0;
    var clearCSS = {width: "auto", height: "auto"};
    var cycle = cycleMain.children('.views-slideshow-cycle-main-frame');
    cycleElements = cycle.data("cycle.opts");
    cycle.css(clearCSS);
    cycleMain.find('.views-slideshow-cycle-main-frame-row').each(function(i){
      $(this).css(clearCSS);
      var tmp_img_width = $(this).width();
      var tmp_img_height = $(this).height();
      if(tmp_img_width > img_width)
        img_width = tmp_img_width;
      if(tmp_img_height > img_height)
        img_height = tmp_img_height;
      cycleElements.elements[i].cycleW = tmp_img_width;
      cycleElements.elements[i].cycleH = tmp_img_height;
      $(this).css({width: tmp_img_width, height: tmp_img_height});
    });
    cycleMain.height(img_height);
    cycle.css({width: img_width, height: img_height});
    cycle.data("cycle.opts.elements", cycleElements);
  });
});

Answer 1

I normally take care of the height with javascript. First I make sure that I am handling the width properly with CSS:

.views-slideshow-cycle-main-frame,
.views-slideshow-cycle-main-frame-row,
.views-slideshow-cycle-main-frame-row img {
  width: 100% !important;
}

Then I create a function that sets the height. This will take whatever container your slideshow is in as a parameter and find the slideshow within it.

/* Slideshow resize function */
Drupal.theme.prototype.slideshowResizer = function (target){
  var slideheight = 0;
  $(target + ' .views-slideshow-cycle-main-frame-row').each(function(){
    slideheight = $(this).find('.views-slideshow-cycle-main-frame-row-item').innerHeight();
    if(slideheight != 0){
      $(target + ' .views-slideshow-cycle-main-frame').css('height',slideheight+'px');
      $(target + ' .views-slideshow-cycle-main-frame-row').css('height',slideheight+'px');
      return false;
    }
  });
};

And finally I call the function on the window resize event:

Drupal.behaviors.slideshowResize = {
  attach: function (context, settings) {            
    $('.your-slideshow-container', context).once('processed', function () {
      Drupal.theme('slideshowResizer', '.your-slideshow-container');
    });

    $(window).resize( function() {
      Drupal.theme('slideshowResizer', '.your-slideshow-container');
    });         
  }
}; 

Also, make sure your base img tag has height: auto;