title: Full screen flexislider with responsive images
body: <h2>The Problem</h2>
  
  <p>I'm trying to use the FlexSlider plugin to create a full page slider. Almost identical to the Suzy Hoodless <a href="http://suzyhoodless.com/project/" rel="nofollow">website</a>. I'm having problems getting the images in my slides to stretch them to fit 100% of the height. </p>
  
  <h2>Update</h2>
  
  <p>So I've managed to work around the problem using this code</p>
  
  <p>I'm now trying to make sure that the images are centred and cropped on <strong>BOTH</strong> sides rather than just the right side when the browser is resized. Any thoughts?
  <br></p>
  
  <pre><code>&lt;div class="flexslider-container"&gt;
  &lt;div class="flexslider"&gt;
        &lt;ul class="slides"&gt;
              &lt;li&gt;&lt;img src="images/kitchen_adventurer_donut.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="images/kitchen_adventurer_caramel.jpg" /&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.flexslider-container, .flexslider .slides, .flex-viewport {
  height: 100%;
  width: 100%;
  }
  
  .flexslider {
  position: absolute; 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%; 
  overflow: hidden;
  }
  
  .flexslider .slides &gt; li {
  width: 100%; 
  height: 100%; 
  display: none; 
  -webkit-backface-visibility: hidden; /* Hide the slides before the JS is loaded. Avoids image jumping */
  }
  
  .flexslider .slides img { 
  min-width: 100%; 
  min-height: 100%; 
  display: block;
  }   
  </code></pre>