Facebook Twitter Email RSS Google+

How to Resize the Images using CSS without losing the Aspect Ratio?

02 Aug, 2008 by
Tech, Tiny Tip, Tutorial

Yesterday, if you have noticed, my blog was down for few hours. This was because I had problems with my WordPress theme with sidebars getting messed up and found it hard to fix it up. I finally managed to debug this issue and found out it was all due to image over-sizing in my latest post. I googled a lot to find a fix for auto resizing images in wordpress, but most of them were either blog theme specific or were controlling the image size before image upload.

Then I found out a quick and easy way to rezise 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 resize the images by keeping height as 300 pixels. You can use the following classes in <IMG> tags like:

<img src="http://mywebsite.com/myphoto.jpg"  class="resize" 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

Subscribe via RSS or Email:

You might also like:

 
Raju is the founder-editor of Technically Personal. A proud geek and an Internet freak, who is also a social networking enthusiast. You can follow him on Facebook and on Twitter. Mail Raju PP.

  • Pingback: [Tiny Tip] Reading the CSS File of a Website | Technically Personal!

  • http://technicaldotcom.blogspot.com techniqueal t.

    OMG. and here i was, manually as in painstakingly and manually placing width and height attributes on almost ALL of my images just to optimize them.

    fantastic tip! dugg it, bookmarked it, love it! ^_^

    techniqueal t.s last blog post..ShowOffRankings: Blog Widget To Show Blog Rankings

  • http://techpp.com Raju

    Thanks a lot buddy :)

  • http://www.stratos.me stratosg

    the only problem with this is if the image is 2Mb then the whole thing will be downloaded and then bowser-side resized. so it’s useful to an extent of sane usage ;)

    stratosgs last blog post..Search comments with “Search Reloaded”

  • http://techpp.com Raju

    wow! obviously i didnt know this Stratos. I have been using this for the past 3 months without a problem, must be within that sane usage range then !

  • http://www.livefromthe310.com 310

    WHERE EXACTLY DO I PUT THIS IN MY CSS?

    • http://techpp.com Raju

      @310,
      Inside your content body, there will be”img” tag. Under that you need to have “resize” defined.

  • Gareth

    Im having abit of trouble… when I put the code into the CSS file and the ‘class=”resize”‘ in the html tag, it only seems to resize the images height wise to a certain pixel but not width wise, its as if its almost one or the other, which defeats the object of the code.

    I want code to make individual images load into a 650px x 500px div, resizing images accordingly depending on their dimensions. Am I looking in completely the wrong place?

  • Gareth
  • bimbolera

    this helped me but in a separate website. i have a problem regarding with plugins (for banner) in wordpress, different banners has its own ups and downs, i have found a new plugin and its great but the catch is, it doesn’t have the automatic resize feature. i do hope i can fix this bug!

  • http://www.hwturk.com Bahattin ARICI

    Thank you very much for the code. I worked a lot of work. I thing is a lot of time searching.

    I’ve done in this way. Makes bigger picture smaller. The size of the value that you have a small picture of picture does not grow.

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

    The postarea, writing which contains the name of the div code.

  • http://www.LPBaker.com L.P. Baker

    I know you posted this two years ago, but it’s still useful. I’ve being trying to solve “stretched” thumbnail images for a couple of days, finally found this via google, problem solved in seconds. Thankyou, thankyou!

  • BBanerjee

    Hi Raju 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 ?!. . . .

  • http://weblogz.ir sepehr

    Thank you
    it war really useful
    also tnx Bahattin

  • Barry

    I used this today on a shopping cart, worked a treat. Thanks Raju.

  • carl

    wondering how google sees this – pages get penalized as much as 5 – 10 points on speed if size and width aren’t specified …
    what is your experience with the css resize?

  • Matt

    This seems to work in Firefox and Explorer, but is anyone else having problems with this working in Google Chrome? Thanks!

  • zjczoo

    nice work

  • http://www.baniels.com Ben

    This is very nice. I wonder, is there a way to EXCLUDE this from my lightbox images that show full size? I only want it to apply to the images in the post, not when they lightbox.

  • pan

    Thanks a lot !!!

  • evan hush

    try this

    what it does is:
    1.) check if height is bigger than width
    2 True) if so make height 100 px and set width to auto
    2 False) if not make width 100 px and set height to auto

    .imgwidthNhigthLess100{
    max-width: 100px;
    max-height: 100px;
    height: expression(this.width > this.height ? auto: expression(this.height > 100 ? 100: true));
    width: expression(this.width > this.height ? expression(this.width > 100 ? 100: true) : auto);
    }

Custom Search
Copyright 2012 Technically Personal!