How to cut image into a web page

Question

I'd like to show a part of an image on my web page. Suppose the original format is 1024x768 the image shown has to be 100x768. It's not a re-size but simple a cut starting from 0,0 pixel. Any suggestions?

Answer 1

Crop the image or use existing library, WideImage is one of the best for this kind of operations.

Answer 2

You can use the CSS clip to show just part of the image, like:

img {
    position:absolute;
    clip:rect(0px,100px,768px,0px);
}

Answer 3

Use CSS's Clip Property:

img { position:absolute; clip:rect(0px 60px 200px 0px) }

Or use overflow on a container:

<div style="overflow:hidden; width:100px; height:76px;">
  <img src="myImage.jpg" />
</div>

Answer 4

Crop the image before you upload it to the server using an image editor. Unless for some reason you need the whole image loaded but cut off...

Answer 5

Another solution would be inserting the image as a background image.

<div style="width: 768px; height: 100px; background: url(theimage.jpg) no-repeat left top;"></div>

Answer 6

Note that the CSS solutions actually download the whole image, then show just the top portion of it.

Depending on usage, I would suggest either a dynamic cropping script or caching pre-cropped images.

A cropping script would be something like:

<?php

// get parameters
$fname = (string) $_GET['f'];
$top = (int) $_GET['h'];

// load original
$old = imagecreatefromjpeg($fname);
list($width, $height) = getimagesize($fname);
   // N.B. this reloads the whole image! Any way to get
   // width/height directly from $old resource handle??

// create new canvas
$new = imagecreatetruecolor($width, $top);

// copy portion of image
imagecopy($dest, $src, 0, 0, 0, 0, $width, $top);

// Output and free from memory
header('Content-Type: image/jpeg');
imagejpg($new);

?>

and would be called from your web page like:

<img src="crop.php?f=myimg.jpg&h=100" />