Alex Rivera | Logout

fix image size without re-sizing

Asked 2012-04-17T18:31:26.700
9

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?

image html image-processing resize slideshow
Edit
Report

1 Answer

5

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.

answered 2012-04-17T18:47:34.290

Your Answer