kmunky kmunky - 1 year ago 98
HTML Question

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

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


Answer Source

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download