title: Responsive Flexslider in Lightbox
body: <p>I had difficulty building a responsive flexslider but managed to find a solution and thought I would share it here. </p>
  
  <p>I wanted to have a flexslider carousel that fitted into the available screen size, as it was appearing inside a light box, and where the carousel images could be of different sizes and ratios and yet still fit into the slider and the screen.</p>
  
  <p>There were some alternative solutions that I looked at initially which included:</p>
  
  <ol>
  <li><p>Making all the images the same size and ratio </p></li>
  <li><p>Providing the image as a background image instead of using actual
  image elements</p></li>
  </ol>
  
  <p>but I wanted a solution which used the actual images. </p>
  
  <p>The difficulty with Flex slider is that when you are using different sized images the key container which is the flex-viewport has its height set by the tallest image. So even if you set the width of flex-viewport the height will be determined by the tallest image. Trying to set the flex-viewport to a relative height using percentages, does not work as it is still overridden by the height of the tallest images.</p>
  
  <p>It is possible to set a fixed height in pixels, but then this is obviously not going to change depending on the size of the display being used. </p>