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


Also Read:
 
Founder-Editor

Raju is the founder-editor of Technology Personalized. 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. Follow rajupp

 
 

28 thoughts on “How to Resize the Images using CSS without losing the Aspect Ratio?

  1. 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?

  2. 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!

  3. 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.

  4. 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!

  5. 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 ?!. . . .

  6. 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?

  7. 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.

  8. 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);
    }

  9. To all of you suggesting the use of expression(); try using your CSS in a browser other than IE before suggesting to use non-standard CSS.

  10. Guys… I just found a solution to scale the height proportionally to width using just css… here is the code (using lightbox):

    #lightbox-container-image-box { position: relative; background-color: #fff; width: auto; max-width:970px !important; height:inherit !important; margin: 0 auto;
    }

    #lightbox-container-image img { max-width:950px; height:inherit !important;}

    Enjoy it πŸ™‚

    Adriano Machado.

  11. this is the quickest & most-effective solution ever!!! solved my dev teams’ half day headache in half a minute πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *