CODEWITHSUNDEEP
htmlcssimage-resizing
kmunky
kmunky

Reputation: 15583

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

Thanks

Upvotes: 10

Views: 65013

Answers (5)

kmunky
kmunky

Reputation: 15583

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.

Upvotes: 16

Chetan Sharma
Chetan Sharma

Reputation: 2557

You can use phpThumb, to resize and cropping the images on the fly. It uses the GD library to create thumbnails from images JPEG, PNG, GIF, etc.

Upvotes: 1

hurikhan77
hurikhan77

Reputation: 5931

I think ImageMagick supports "resize to fit" and "resize to fill" methods, the latter being what you are looking for.

Before writing your img tag to the output buffer, save the image to the resulting proposed file name and let 'identify' extract the width and height of this image for you.

If you don't want to work with a seperate file but instead want the image data inline, try the data-uri method which newer web browsers support. This inlines the binary data stream of the image within the html file, so it is embedded.

Upvotes: 1

Johannes Gorset
Johannes Gorset

Reputation: 8785

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.

Upvotes: 1

zerkms
zerkms

Reputation: 254886

create helper like:

<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>

so this helper will check if resized image already created or create new one. and in both cases it returns proper url to the new image.

Upvotes: 0

Related Questions