How To Resize Images With CSS – Keeping Aspect Ratio As It Is: Quick & Easy
I found a quick and easy way to re-size images with CSS by keeping your image’s aspect ratio. This is very quick you can use it in less than 5 minutes, lets proceed 
Lets say you want to show large images on your web page with maximum 200 pixels width, blog or forums just create the following css class into your styling css file:
.resize {
width: 200px;
height : auto;
}
.resize {
width: auto;
height : 300px;
}
Second class will re-size the images by keeping height as 300 pixels. You can use the following classes in <IMG> tags like:
<img src="http://mywbsite.com/myphoto.jpg" alt="my photo" />
The above solution is always better than putting width and height attributes into the <IMG> tag. Hope it works out for you too.
Anyways you can use any image re-size script with server side script technology like PHP. If you find any fast script, please share a link in comments.
About The Author
Simple, works a treat
It looks like max-width and max-height are what work for me.
Hello,
I stumbled upon your site when i was stuck on resizing images via CSS.
Your code works perfect on my personal website.
Thanks for you contribution!
I used your approach in one of my website and got good results. However when the width of one picture is less than 200px then it is not giving good results. Do you have any idea on this? For large picture picture having width equals or greater than 200px, this works great.
Amazing! Who needs Javascript. If I'd only thought about that earlier…:). Thanks.
Doesn't work with Opera.
I tried all kinds of ways, as others suggested, and tried different browsers, but I can't get this to work at all. Perhaps I misunderstand what you're trying you do.
What I thought was going to happen that a large image would get scaled down as you changed the size of the viewing window. But it doesn't. The image is scaled as per "isize" css and remain fixed.
Any idea how I could accomplish what I would like to do?
Thanks,
Great ,, it's done .
Thanks sir .
Thank you very much, great trick!
I need to resize an image for the background in inline CSS for a facebook fanpage box – nothing is working -what would the code look like?
that is css genius
[...] and links of each component of the social events app. Also, major thanks this holiday season for dynamic image resizing with CSS. (Please note: our users submitted the messages, not the [...]