Resize Image on the Fly to Fit in a Square Box

Written by on

This simple image class will allow you to get an image from your server to dynamically resize it and center it top/bottom and left/right in a square box. If you have some images that are all good kb size but are a bit random in their dimensions, you can use this class to make them fit dynamically in a box. It will make images that are larger than the bounds of the box smaller, but will not adjust the size of images that are smaller than then bounds. That would make them blurry, so instead it just makes them centered in the box.

I am using this in a scenario where there are images that have been uploaded to the server that are very small 200x200 and rather large 1000x1200. The size of my display box in this example is 400x400.

Here is a demo: http://www.matthewaprice.com/image-resize-demo/

Use PHP to Center an Image in a DIV

Written by on

I have created a way to always center an image in a DIV container. This has been a thorn in my side as CSS is not my strongest skill.

So here is the concept. Have a container DIV that has a fixed width and height. Then use the GD Library installed with PHP to get the image size that is being displayed inside the DIV. Then subtract the image height from the container height and divide by two. You can do the same for the height.

Simple Javascript Image Gallery

Written by on

I have been looking around for a very simple image gallery where i could have thumbnails below a main image to no real avail, so i went ahead and wrote my own. In my eyes it is cool as it allows for one image tag to define both the thumbnail and fullsize image.






Real Time Web Analytics ^