Hi All. In this Article I am going to show you how we can align images on websites with different sizes.

Let’s say we have a Products listing page & various food products are listed with its thumbnail images like Cheese packet, Honey Bottle, Tea packets etc. These products are not supposed to be having all same size images. But we have to show that as thumbnail with proper resolution.

So here is what we can do to achieve it easily.
1. Decide the maximum image width & height
2. Include the function code below into your code & call it like this where you want to display the image

`<? echo imageRestrict(\$image, \$maxwidth, \$maxheight) ; ?>`

Here,
\$image =  Path of the original image
\$maxwidth = maximum width decided for the image
\$maxheight = maximum height decided for the image

Done…

As you can see, this was a very simple 2 step task to do. The way this function will work is,
it will first decide the New height of the image Based on the Maximum Width.
After that it will check if the New Height goes beyond the Maximum height,
then it will calculate the Maximum Width based on the New Height. This way it will calculate both Height & the Width to fit in the decided Maximum Height/Width.

Hope this peace of code gets helpful in you coding.

```
function imageRestrict(\$image, \$maxwidth, \$maxheight) {

list(\$width,\$height) = getimagesize(\$image);

if (\$width > \$maxwidth) {

\$newheight = \$maxwidth/\$width * \$height;

if(\$newheight > \$maxheight){
\$maxwidth = (\$maxheight * \$maxwidth)/\$newheight;
\$newheight = \$maxheight;
}

return '<img src="'.\$image.'" width="'.\$maxwidth.'" height="'.\$newheight.'">';

}

else {

return '<img src="'.\$image.'" width="'.\$width.'" height="'.\$height.'">';

}

}
```