Question

I’ve created an image carousel using jQuery.Cycle, I want the width to scale with the browser size (100%) but I want the height to be constrained to a 500px high div.

I’d like for the image to scale from the center point, and to scale proportionally. The overflow of the image within the div would need to be hidden (i.e. cropping the image).

#slideshow {
    margin: 0 auto;
    width:100% !important;
    height:500px;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
#slideshow img{
    margin: 0 auto;
    width:100%;
    height:100%;
    display:block;
    overflow: hidden;
}

HTML

<div id="slideshow">    
        <div class="ss2_wrapper">
        <a href="#" class="slideshow_prev"><span>Previous</span></a>
        <a href="#" class="slideshow_next"><span>Next</span></a>
        <div id="slideshow_2" class="slideshow">                
            <div class="slideshow_item">
                <div class="image"><a href="#"><img src="images/HomePage/ban1.jpg" alt="photo 2" /></a></div>
            </div>                              
            <div class="slideshow_item">
                <div class="image"><a href="#"><img src="images/HomePage/ban2.jpg" alt="photo 3" /></a></div>
            </div>              
            <div class="slideshow_item">
                <div class="image"><a href="#"><img src="images/HomePage/ban3.jpg" alt="photo 1" /></a></div>
            </div>          
            <div class="slideshow_item">
                <div class="image"><a href="#"><img src="images/HomePage/ban4.jpg" alt="photo 4" /></a></div>
            </div>              
        </div> <!-- slideshow_2 -->
    </div><!-- ss2_wrapper -->    
</div><!-- slideshow -->

The page is located here: http://samaradionne.com/euro

Right now the image is stretching the width of the browser but not proportionally.

Answer 1

If you want the images to scale proportionally and aligned to the center you should set height: auto; and center the images by using text-align: center;

#slideshow img {
  margin: 0 auto;
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  text-align: center;
}

This will “crop” from the bottom of the images.