diff --git a/field_slideshow.css b/field_slideshow.css
index c4595ae..160fdb4 100644
--- a/field_slideshow.css
+++ b/field_slideshow.css
@@ -1,5 +1,12 @@
 .field-slideshow {
   overflow: hidden;
+  max-width: 100%;
+}
+
+.field-slideshow-slide, .field-slideshow-slide a, .field-slideshow-slide img {
+  max-width: 100%;
+  height: auto !important;
+  width: auto !important;
 }
 
 .region-content ul.field-slideshow-pager {
diff --git a/field_slideshow.js b/field_slideshow.js
index f8dc14d..eff9043 100644
--- a/field_slideshow.js
+++ b/field_slideshow.js
@@ -91,6 +91,10 @@
 
           // Configure the cycle.before callback, it's called each time the slide change
           options.before = function(currSlideElement, nextSlideElement, options, forwardFlag) {
+            // Make the slideshow "responsive" compatible
+            $(currSlideElement).css('position', 'absolute');
+            $(nextSlideElement).css('position', 'relative');
+
             // The options.nextSlide sometimes starts with 1 instead of 0, this is safer
             var nextIndex = $(nextSlideElement).index();
 
@@ -109,9 +113,23 @@
             }
           }
 
+          // Recalculate height for responsive layouts
+          var rebuild_max_height = function() {
+            var max_height = 0;
+            $("img", slideshow).each(function(){
+              var img_height = $(this).height();
+              max_height = Math.max(max_height, img_height);
+            });
+            if (max_height > 0) {
+              slideshow.css("height", max_height);
+            }
+          };
+          $(window).resize(rebuild_max_height);
+
           if (num_slides > 1) {
             // Cycle!
             slideshow.cycle(options);
+            rebuild_max_height();
 
             // After the numeric pager has been built by Cycle, add some classes for theming
             if (settings.pager == 'number') {