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

By on December 16, 2009 in HTML

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.

Related posts:

About Sach

Sachin is a web application developer, technology blogger and web addict! He has over 6 years of web development experience and he writes tutorials primarily focused on LAMP, Ajax, Api's, jQuery etc. He is usability expert and he always likes to share his knowledge with people.
View all posts by Sach →

, , ,

  • Nick

    Simple, works a treat

  • Pingback: Summer Mittens Design » Blog Archive » Publk: Now and Upcoming

  • David

    It looks like max-width and max-height are what work for me.

    • keysle

      This is much better. thanks!!. I just googled this

      • Eric

        only work IE7-, not work for FF/Safari/IE8+

        • Eric

          sorry, it works:)

  • Edmond den Dekker

    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!

  • Alex

    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.

  • Christine

    Amazing! Who needs Javascript. If I'd only thought about that earlier…:). Thanks.

  • punund

    Doesn't work with Opera.

  • Peter Versteegen

    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,

  • Trax

    Great ,, it's done .
    Thanks sir .

  • Greg

    Thank you very much, great trick!

  • Michal

    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?

  • kvnmcwebn

    that is css genius

  • hte

    thanks, works very well

  • a_[w]

    If you realy don't know using what side of the image you need to resize, you can specify only max-width and max-height CSS properties and browser will fit image automatically.
    .icon{
    max-width:64px;
    max-height:64px;
    }

  • Pingback: 웹서버 최적화 Log… | Sonar & Radar

  • Sunimal

    Wow!! Great job Sachin. Thank you so much. You're a champion!

  • Vince

    The only thing is that you are STILL downloading a large image, only to resize it on display. If you have a lot of 3Mb images on a page and have to download them all only to resize them on the client end, that's going to suck up a lot of bandwidth,

  • Nicole

    I have the same question as Peter Versteegen asked before, and as far as I could see had not been answered completely. I would like to have a large image get scaled down with fixed proportions as you change the size of viewing window. Right now my picture does not have the ratios fixed if you change it and the picture looks "squeezed" . Any help welcome. I can't get this to work in Dreamweaver.

  • @simonjpa

    Great article! It work as it says.

  • Pingback: Resize Images With CSS « WONGPAK Memo

  • Ankan

    nice one !!

  • BBanerjee

    Hi its a really nice trick.

    But I want my image to be clicked to see the image in its original Aspect Ratio .

    Can N E 1 help me out ?!. . . . :S

    • SachinKRaj

      BBanerjee: Try this on your img tag:

      onclick="this.style.width='auto'"

      For example:
      <img class="resize" src="image.jpg" onclick="this.style.width='auto'" />

      Let me know if it works for you?

  • greg

    great, auto did the trick. Thanks.

  • Simon

    The article is great. But the right answer for my project is from the user a_[w].

    Thanks a lot.

    I have a lot of products on my site. Almost all of them are the same height. But I have some that are vertical and horizontal. So it's easy to resize the height but then the width get too large after, so the solution from the user a_[w] was the best.

    Thanks

  • tzkdesign

    IT´S FANTASTIC!!!!!!!!!!!!!!!!!!!!! NO MORE SCRIPTS RESIZING NEEDED, LOVED IT, THANKXXXXXXX

  • tinkery

    Works great with a few images. Fails when you start to get into large amounts of images with large file sizes, as it forces the client side browser to do all the heavy lifting…ultimately slowing down the load times considerably.

    If you have a dubious amount of images to resize on a single page…we still need to use real thumbnails to optimize page loads; at least until the CSS Crop function gets more implementation…

  • Santhosh

    I wanted something like this exactly for my website. Thanks So much!

  • ausfahrt

    I have a different question, this may or may not be possible. Let's make this simple and say I have a viewing area of 1000×1000. All of my images are 300×400 or 400×300. I always want the longer edge (even though it is not that size) be 1000px, or 100%. Now my issue is that, I could change for some and for others, but I have a javascript that is switching the image from one to another. So I want it to be able to always have css make the longer edge 100% while keeping the aspect ration. Is it possible?

  • sakins

    perfect!

  • best car collection

    Thanks you… :D

  • Jack Isidore

    wonderful, thanks thanks thank thank…

  • Gonzalo

    this code worked perfectly for me

    .imgitem {
    width: auto;
    height: auto;
    max-width: 65px;
    max-height: 65px;
    }

    and it resizes keeping any ratio that the image has

  • pdfmania

    i just put code
    .divclass img{width:50%}
    don't think need the height , it will adjust automatically, save a little file size.

  • Artyom

    Thanks! I’ve modified a bit to resize only big images:

    .post img {
    max-width: 730px;
    width: expression(this.width > 730 ? 730: true);
    height: auto;
    }

  • Enrico

    It works great but not perfect.
    1. If your image has no width and height specified then as pdfmania just said you need to declare just one size on your CSS and the other size will adjust automatically.

    2. If your image has width and height properties specified then your code works good and does the job.

    3. but if your image has width or height specified using style attribute then it doesn’t work cause inline style (or even internal stylesheets if you are using it on an external one) have higher priority

    • jener

      yes you are right enrico

  • shash7

    Nice one.