Sunday, January 4, 2009

CSS Image Ratio

Hi All, 

It has come to my attention that it is not a widely known fact that you can resize images, while keeping the ratio in perspective using CSS. I was using my technique for doing this the other day, and was curios to see if other people had discovered better ways of doing this. To my surprise, I found that a lot of forum posts etc were mentioning that it cannot be done. Without futher stalling......here is how you do it, and make it work in all browsers as well.


<div id="main_image"> <img src="img/Bazaar.jpg" alt="Bazaar" title="img/Bazaar.jpg" /> </div>
 

 #main_image
        {
            margin: 0 auto 60px auto;
            height: 250px;
            width: 350px;
            text-align: center;
        }
        #main_image img
        {
            margin-bottom: 10px;
            height: 250px;
            width: 350px;
        }

I know....this seems so obvious......but a lot of people were using the DIV to do the resizing, and in my experience this causes stretching with the image contained within the DIV.

Hope this helps, 

 - Tim

No comments: