JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<script src="https://raw.github.com/malsup/cycle/master/jquery.cycle.lite.js"></script>
<div id="container">
  <div id="main" class="home" role="main">
      <img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452120_800_892531_800.jpg" />
      <img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452125_800_37eba7_800.jpg" />
      <img class="slide" src="http://payload.cargocollective.com/1/0/18788/1279362/452132_800_7dc0b6_800.jpg" />
  </div>
</div>

CSS

#container {
    max-width:960px;
}
#main {
    max-width:780px;
    height:520px;
    margin:0 auto 40px;
    overflow:hidden;
    background:#ccc;
}
#main img {
    width:100%;
    height:auto;
}

JavaScript

$('.home').cycle({
        fx:'fade' 
    });
    $('#container').resize(function(){
          var child_height = $('.slide:visible').height();
          $('#main').css('height', child_height);
    });