How To Resize Images With CSS – Keeping Aspect Ratio As It Is: Quick & Easy

Add a comment July 17th, 2008

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.

Share or Bookmark this Post:
  • StumbleUpon
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • Mixx
  • MySpace
  • Reddit
  • Google Bookmarks
  • Yahoo! Buzz
  • Technorati
  • Live
  • DZone
  • Netvibes
  • RSS
  • Print

 

  • Christine
    Amazing! Who needs Javascript. If I'd only thought about that earlier...:). Thanks.
  • 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.
  • 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!
  • David
    It looks like max-width and max-height are what work for me.
  • Simple, works a treat
blog comments powered by Disqus
Real Time Web Analytics