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?

Solution 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.

Solution 2

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.

Solution 3

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 :)