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.

Answer 2

You can't render an image and HTML in the same file because browsers depend on its content-type header to interpret it.

The content-type header of a HTML document is generally set to text/html whereas the content-type of an image is image/* (substitute * for image format). You could print image data to a HTML document, but since the browser is instructed to interpret it as text/html rather than an image its contents would be garbled.

You will need to link your <img> tag to a PHP file like you described. I'm not sure why that constitutes a problem; it's the right way to go about it. You could of course crop the image by manipulating its dimensions in HTML, but I don't recommend you do.