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