HTML Forum

Here's a question on images and caption scaling and alignment that has me beat.

i have some pages which each displays one centered photo - as in a gallery but i put each on its own page. These photos are to be scaled to 70% of the screen height. With that I find that they fit well in lots of different screen sizes and windows, with main title above and links to next and previous pages below. Ive gat all that working fine - people with big screens get a nice big image and those with small screens can still see it all.

But I want the caption to be below the image, with its end aligned with the lower right corner. How can I make that alignment work? its easy if I know the pixel size of the image, but with the image scaling according to height (with width in proportion)I cant figure out a way to tie the alignment of the caption to the width of the image. Ive tried putting them both in a table or div, but i then seem to lose the ability to scale the image properly.

I got stuck on that one too. Where do you get the screen height without javascript? (Or when you said "java" did you really mean "java"? ;)) Is there a supplementary maximum height to ensure that the image never gets bigger than its real size? Is it your own raw code or one of those proprietary add-ons so only the resized image gets downloaded?

Resizing on the fly is an iffy approach at best. The users who need the most resizing (phones and tablets) are the ones most likely to have constraints on download size. They're also the ones most likely to have a viewport that's taller than it's wide. That's a shame because with an ordinary desktop browser, screen height is a better criterion than width.

Thanks for the replies - I actually have a solution now, given to me on another forum and ive fixed my code to suit. Height rather than width is the main scaling criterion, combined with alignment of the caption. I cant put links on this forum but let me assemble a generic version of the code and Ill show you. And ill post a screen shot to show you how it looks.