fix image size without re-sizing

You could use CSS to set the size of the images in the slideshow without necessarily changing the aspect ratio of the image.

• set the height of the image to the height of the slideshow container

• make the width auto so it maintains its aspect ratio

• set a max-width so it doesn't get wider than the slideshow

slideshow.img{
    height:170px
    width:auto;/*maintain aspect ratio*/
    max-width:500px;
}

Note the images might be slimmer than the slideshow if the original size is small.

You should be able to use CSS's max-width property. You won't want to specify the width or height if you do this.

Your HTML:

<div id="yourContainer">
    <img src="imagePath" />
</div>

And your CSS:

#yourContainer {
    width: 500px;
    height: 170px;
}

#yourContainer img {
    max-width: 100%;
    max-height: 100%;
}

This won't centre your image inside of the container, but it should get the job done for you.

I have figured out how to accomplish image resize keeping aspect ratio and centering the image with simple piece of CSS code as follow:

width: auto !important; /*Keep the aspect ratio of the image*/
height: 140px !important;
margin: 0 auto 1em auto; /*Center the image*/

Hope this help someone :)