title: Trying to fit a slideshow width to fit screen
body: <p>I'm trying to create a slideshow (of images) which I've done (by coping an example and changing it slightly, but I'm trying to fit the image size so that there is no option of scrolling.  I tried putting it in a div, but this did not work (undoubtably due to my incompetence).  I have looked up lots on here, and found several cases of people asking the same/similar questions (e.g <a href="https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window">How to resize an image to fit in the browser window?</a>), however I have been unable to apply it.  Currently when I view this, the page size is the size of the largest image (when the image is larger than the page.)</p>
  
  <p>Many thanks for your help.</p>
  
  <p>Here is where I'm currently at:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;JQuery Cycle Plugin - Basic Demo&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .slideshow { height: "100%"; width:auto }
  &lt;/style&gt;
  &lt;!-- include jQuery library --&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- include Cycle plugin --&gt;
  &lt;script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.slideshow').cycle({
          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="slideshow"; style= height: "100%"; width:"auto"&gt;
          &lt;img src="1.jpg" /&gt;
          &lt;img src="2.jpg" /&gt;
          &lt;img src="3.jpg" /&gt;
          &lt;img src="4.jpg" /&gt;
          &lt;img src="5.jpg" /&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>