Virtual Image Cropping

While designing a web site, we often end up trying this and that to see how it looks with the changes. And then trying something else. And again.

Such was the case last week.

One of our sites is being redesigned. At a certain point, the design looked pretty good. But it needed a bit of something, we thought, to give it an extra touch of pizazz.

An idea we had for interior pages was to show a cropped area of an image that is fully displayed at the home page — a virtual cropped image. We preferred to use the same image file, taking advantage of browser cache, instead of loading a separate cropped image.

Code was written to give it a try.

I thought you might benefit by having the virtual image cropping code available. It's a good technique to know about.

An image can be published on a web page in such a way that it appears cropped. Only a portion of the original non-cropped image is visible.

The technique can be used to present unique views of an image. It can also be used in lieu of separate thumbnail image files and to create interesting images that can be presented as if they were thumbnails.

Virtual Crop Examples

The image pixel dimensions are 640x480. The examples will show virtually cropped areas with the Blue Midnight image at several different dimensions.

Here's the Blue Midnight image, its dimensions reduced to fit into the available space.

Instructions follow the examples.

The first virtual cropping example shows the highlighted cliff at the left of the image. The underlying image is full size.

Here's another example. The virtual crop is from near the bottom right area of the image stretched (640x480 to 600x220).

With the horizontal stretch, the precipitous terrain has flattened considerably. The technique can be used to create interesting effects.

How It Works

The visual dimensions are the dimensions of a div tag within which the image resides.

The div tag has an inline overflow:hidden; CSS declaration so any part of the image that would extend outside the div isn't published. The div tag also has a position:relative; declaration so the image can be positioned within it.

The image tag has a position:absolute; CSS declaration to allow positioning the image exactly within the div. It also has left:___; and top:___; declarations to specify the image position.

The result is a specific part of the image showing within the dimensions of the div.

Implementing Virtual Image Crop

Below is a template for implementing a virtual image crop. Only required CSS declarations are in the template. You may, of course, add others. Borders, rounded corners, and shadows come to mind.

Notes follow the template.

<div style="position:relative; width:170px; height:170px; overflow:hidden;">
<img
    src="https://www.willmaster.com/images/lightfocus/blue-midnite.jpg"
    style="position:absolute; left:-5px; top:-120px; width:640px; height:auto;"
    alt="picture">
</div>

Notes:

All CSS declarations (in both the div tag and the img tag) are required. Others may be added. The CSS declarations don't need to be inline; they may instead be in a style sheet.

Only the parts of the template that need customizing are mentioned below:

Designer's Tool

The virtually cropped image code is a designer's tool, useful for integrating into some site designs. Also for enhancing certain articles or blog posts.

(This article first appeared in Possibilities ezine.)

Will Bontrager