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" />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=""<img src="image.jpg" resize("image.jpg") />Thanks
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.