1. Home
  2. Forums Index
  3. Browser Side / HTML 5:17 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

Scaleable image with caption - question

         

Johndh

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

10+ Year Member



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

John

lostdreamer

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

10+ Year Member



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)

ie: 

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


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?

lucy24

9:16 pm on Sep 11, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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.

Johndh

9:49 pm on Sep 11, 2012 (gmt 0)

10+ Year Member



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.

John

Johndh

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

10+ Year Member



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


</head>
<body>
<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
</span>
 </span>

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

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

</body>
</html>

Here is the relevant css: 


.outer {
 height:100%;
}

a.photo, a.photomenu{
 border:1px solid;
 border-color: #666 #444 #444 #666;
 background: #222;
 font-size:0.8em;
 line-height:100%;
 font-family:Arial;
 text-decoration:none;
 padding:2px 12px 2px;
 margin:0px;
}

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

img.gallery {
 height:70%;
 padding-top:34px;
 padding-bottom:5px;
}
.scene {
 position:relative;
}
.photolinks {
 display:block;
 position:absolute;
 left:0px;
 word-spacing:normal;
}

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
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 5:17 am May 1, 2026