Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Scaleable image with caption - question

11:47 pm on Sep 8, 2012 (gmt 0)

New User

joined:Aug 7, 2012
posts: 14
votes: 0

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'm using html4 with CSS. Id prefer not to need java.

cheers and thanks for any insights

3:03 pm on Sept 11, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:July 8, 2010
votes: 0

Put the main image inside a DIV container (this container will automaticly be the same size as your image) and your caption as well (1 line below)


<img src="path/to/image.jpg"><br>
Caption text

You can use css to center the DIV in the page and set it's width to 70% (set the image on 100% to make it scale to it's parent container)

As long as the DIV has text-align:right; your text should aline with the bottom right corner of the image...

How are you currently scaling your image?
9:16 pm on Sept 11, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 358

How are you currently scaling your image?

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.
9:49 pm on Sept 11, 2012 (gmt 0)

New User

joined:Aug 7, 2012
posts: 14
votes: 0

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.

10:20 pm on Sept 11, 2012 (gmt 0)

New User

joined:Aug 7, 2012
posts: 14
votes: 0

It worked out very well, with help!.
This is the main body section of the html4 code:

<div class="outer">
<h1>Title Title</h1>
<span class="scene">

<span class="photolinks"><a class="photomenu" href="../index.htm">Home</a><a class="photomenu" href="../photos.htm">Photographs</a></span>
<img class="gallery" src="photos/photo10.jpg" alt="">
<span class="photocreditgallery">Caption Caption

<a class="photo" href="photo9.htm">Previous</a>
<a class="photo" href="photo11.htm">Next</a>

<div style="display: none">
<img src="photos/photo11.jpg" width = 0 alt="photo">


Here is the relevant css:

.outer {

a.photo, a.photomenu{
border:1px solid;
border-color: #666 #444 #444 #666;
background: #222;
padding:2px 12px 2px;

a.photo + a.photo {margin-left:80px;}

img.gallery {
.scene {
.photolinks {

And this is a screen shot, with a window purposfully reduced to about 1/2 of my screen - its all scaling and aligning quite nicely:

[i731.photobucket.com ]

Ive had very good help before on this forum, so Im hoping this may be of use to others