CSS image percentages behaving wildy

Question

I hope it's not a conflict in my CSS styles somewhere, but on my page (http://www.marioplanet.com/product.htm) I'm trying to apply a CSS rule to all images with a class of FancyBox to shrink them from 25% of their original size.

Now, I've heard that this may just be applying to the containing table cell, so please tell me if this is the case.

Also, if the above is true, is there anyway I could do this with just plain CSS and HTML and no JavaScript?

Thanks!

Answer 1

A simple width:75%; isn't enough?

.fancybox{ width:75%; }

Answer 2

Unfortunately, width:25%; would result in width to be a quarter of container size, not original element size.

I think, the best option is to decide what size you want and provide them in pixels.

Answer 3

If you specify the width in percentage, this width will be calculated according to the width of the parent element, here, a <td/>. So the result you have is quite expected.

Now, if you want to size the images to 25%, you have two ways to do that:

• Get the width on server side, divide it by 4 and set it in HTML. It is an easy, but quite bad solution (see further).
• Resize the image on server side by scaling it to ¼, then send the resized image.

The second solution is much better, because there is no reason to make the users wait four times more to see the images (and to spend the bandwidth and the server performance). By the way, since you will store the scaled images, there will be no overheat for the server for the resize.