The button problem

The button problem

The issue

Building the webpages for the Panorama project I wanted to use the buttons (button-tag) with a picture (with a various height/width ratio) on it and some text. To do this, I created a nav tag with a number of button tags. Despite a lot attempts to align these buttons didn't work out for me in a acceptable way. Usually the buttons align on the bottom of the images.

First I tried set all the images to the same height, but than the width was fluctuating, what wasn't my intention. Secondly I set the width to the same value, but then the alignment of the buttons went wrong. Not my intention neither.

The solution

I found the solution in manipulating the photo. The first step was to downsize the photo so it fits in a mask mask of 144 by 54 pixels. The next step was merging the resized photo in to a transparent PNG image (size 144 by 54 pixels). Finally I saved the the picture as a PNG image. In this way, the aspect ratio of the original photo maintained while it got a standardized size. Because the strips above an below the photo are transparent, you don't notice the trick.

I use the PNG image format because the possibility of transparency. You see always what is behind the photo and don't have to change the color of the strips above en below.

Example

example foto01
 The original photo.

example foto02
The photo resized within a mask of 144 by 54 pixels.

example foto03
The transparent PNG image (squares pattern to make it "visible").

example foto04
The photo merge (stick on) with the PNG image.

example foto05
The final result.

p.s.: I gave all the images above a border to make all the changes visible.