How to resize an image in pure HTML/CSS while keeping its proportions?

html css image-resizing
kmunky picture kmunky · Feb 9, 2010 · Viewed 63.2k times · Source

How can I resize an image using HTML/CSS only (i.e no server code) while keeping its proportions and have a crop effect. Details: I wish to resize it to a specified width, keep the proportions and if the height is bigger than a specified value to crop it to the specified height ?

Actually, I know how to do that using some server code but I don't want to do this. It would imply using a different file reference and refer the picture something like <img src="picture.php" />. I need to process the image in the same page that displays it.

What "bothers" me is that I have to send the image header so nothing else on the page will be displayed.

Is there a way to do something like that? Maybe from pure HTML/CSS? :P

I made a function that does something like that (except that "crop" thing) and it returns just width="" height="" and I use it like this <img src="image.jpg" resize("image.jpg") />, but I don't get how can i do that crop...

Thanks

Answer

kmunky picture kmunky · Feb 10, 2010

ok, so i managed to find a way to do that from html/css. The whole idea was to get rid of that "extraheight" :

<div style="width:200px;height:200px;overflow:hidden;" >
   <img src="image.jpg" width="200px" height="auto">
</div>

first my image is resized to desired width(keeping the proportions) and then giving a fixed height to containing div and setting overflow to hidden makes the script to display just the desired portion of the image.

Related questions

Resize image proportionally with CSS?

Is there a way to resize (scale down) images proportionally using ONLY CSS? I'm doing the JavaScript way, but just trying to see if this is possible with CSS.

Read More
How to set max width of an image in CSS

On my website I would like to display images uploaded by user in a new window with a specific size (width: 600px). The problem is that the images may be big. So if they are bigger than these 600px, I …

Read More
how to create proportional image height/width

So, I want to have an image resized to 30% of its original height/width. Pretend you don't know its height or width, how would you go about it using only CSS/HTML?

Read More