title: How to set width and height of slideshow dynamically
body: <p>I have set up a web page using an image in a div called slideshow. The div is supposed to be a max-width of 1600px and a max-height of 600px (width and height of the original jpg used here) and to shrink down dynamically when the screen is smaller or resized.</p>
  
  <p>This works fine because the behavior of the image is set by CSS as follows :</p>
  
  <pre><code>.slideshow img{
      margin:0 auto;
      width: 100%;
      max-width: 1600px;
      min-width: 900px;
  }
  </code></pre>
  
  <p>Now I would like to achieve the same effect by replacing the image with the Camera Slideshow from Pixedelic. But here I can't control the image with .slideshow img{} since the script uses a div instead of the image tag.</p>
  
  <p>Width and height of the camera slideshow are controlled by a jQuery function.
  I have put the slideshow in a .slides div which I try to control by CSS, like this :</p>
  
  <pre><code>.slideshow .slides{
      display: block;
      margin:0 auto;
      max-width: 1600px;
      max-height: 600px;
      overflow:visible;
  }
  </code></pre>
  
  <p>(Overflow is left visible to see what happens)</p>
  
  <p>When I assign a height value (ie 600px) in the function, the slideshow loads at it's max height but doesn't shrink when the page is resized down : <a href="http://www.centredelafontaine.be/testpage1.html" rel="nofollow">http://www.centredelafontaine.be/testpage1.html</a></p>
  
  <p>When I leave height and width values blank in the function, the slideshow shrinks on resize but opens with a height of 800px (?) and crops the even greater image inside, overflowing the div placed below :  <a href="http://www.centredelafontaine.be/testpage2.html" rel="nofollow">http://www.centredelafontaine.be/testpage2.html</a></p>
  
  <p>Can anyone help me on this issue ? </p>