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.
Simple, works a treat
It looks like max-width and max-height are what work for me.
This is much better. thanks!!. I just googled this
only work IE7-, not work for FF/Safari/IE8+
sorry, it works:)
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
thanks, works very well
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;
}
Wow!! Great job Sachin. Thank you so much. You're a champion!
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,
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.
Great article! It work as it says.
nice one !!
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
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?
great, auto did the trick. Thanks.
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
IT´S FANTASTIC!!!!!!!!!!!!!!!!!!!!! NO MORE SCRIPTS RESIZING NEEDED, LOVED IT, THANKXXXXXXX
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…
I wanted something like this exactly for my website. Thanks So much!
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?
perfect!
Thanks you…
wonderful, thanks thanks thank thank…
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
i just put code
.divclass img{width:50%}
don't think need the height , it will adjust automatically, save a little file size.
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;
}
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