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

Question

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 1

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.

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

Sign up