fix image size without re-sizing

Question

I have a div which is width:500px; and height:170px;

The div contains a jquery slideshow which gets random images from my database and displays them.

Problem is that the images are uploaded by users and can be any aspect-ratio/any size.

I need the images to fit the div without being resized using

style='height:x; width:x;

Basically, I want all images to be displayed properly and in acutal quality.

I don't want to restrict which sizes of images can be uploaded as they as displayed in other parts of the site in full size/quality.

Can any provide a solution?

Answer 1

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.