Published: Friday, 08 February 2013 16:20Written by OgriHits: 10034

The problem arose when I was making a website with an online store. Pictures of products on the pages have to be displayed identically, whereas the customer has pictures of all possible sizes and proportions. In order to free him from the image editing, it was decided to inscribe them in a container - <div> block of fixed size, framed with border. Horizontally elongated images will be inscribed by width, while vertically elongated ones - by height respectively. The images should be clickable.

Actually, the problem is quite typical and has existing solutions, for example, only using CSS-styles. However, when such a powerful weapon as a server-side code is in hands, it's a sin not to use it when you are rather a programmer than a designer. So I wrote a function that covers every possible aspect ratio of the container and inscribed image. Let me offer it to the public.

1. Define the constants that specify both dimensions by which we inscribe:

define('ALIGN_BY_WD',0);define('ALIGN_BY_HT',1);

2. Find image size. To do this, use the function getimagesize(). As an argument, this function requires the image file name, including path to it. It returns an array of 7 elements, of which we are interested in the first two (ie indexes 0 and 1) containing respectively the width and height of the image.

$size=getimagesize($img_file);$img_wd=$size[0];$img_ht=$size[1];

3. Determine which dimension will be used to inscribe. If the container is more vertically "flattened" than the image, so after adjusting the size the image will be fit by height, otherwise, - by width. This logic is implemented in the following PHP code snippet:

A special case when proportions of both rectangles are equal, and you can align in any dimension, is processed in the else block.

4. Now we can inscribe our picture into container. To do this, we calculate the width and height of the inscribed image - $new_img_wd and $new_img_ht. For subsequent centering also define variables $rel_edge and $abs_edge - edges for relative and absolute positioning on relevant measurements, and $new_img_dim - the size that will be used to set the indent. Assign values ​​to them in accordance with the directions of alignment.

5. Center the image. Picture inscribed by width will be vertically adjusted, while the one inscribed by height - horizontally. To do this, use the technique of alignment as described in the previous article. Assign the required string of style to the variable $img_style:

Have we achieved the desired result? Not really. Try to move the cursor over our block and see that the margins between the image and the edges of the container are beyond the link. To ensure the link to cover the entire block, do the following:

Place our inscribed and centered image before the link anchor.

Instead, place transparent PNG-image inside the anchor, and specify the size of this image to be the same as the size of the container.

Thus, our picture becomes overlapped with the transparent image and remains visible yet. The zone of link action expands to fill the container.

The modified code snippet that returns the value of the function takes the following form: