Images and caption scaling and alignment

**johnh1960** · Sep 8, 2012 18:21

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

**Rayzur** · Sep 8, 2012 18:30

But I want the caption to be below the image, with its end aligned with the lower right corner.

Have you tried text-align:right, I suspect you should be able to set a class on your text element and then add text-align.

If you use a <p> tag it will be a block by default and fill the full width, then your text will align on the right side.

You could also just float your caption element to the right.

Got a link to your page?

**johnh1960** · Sep 8, 2012 19:23

Rayzur - Thanks for the reply. I don’t want the caption to align to the far right, or a particular fixed extent to the right. I’m trying to align it to the width of the picture above it, which varies in different browser windows.

Here’s one of the pages, and you will see the small grey caption with the photographers name. Try reducing and increasing the height of the browser window and you’ll see the picture scale as i have requested. But the caption stays in a fixed position (i used text align), and so it does not track neatly with the lower right corner of the image in different window sizes.

http://www.stopwiltonairport.org/photo4.htm

(btw the site is for a local action group to fight an airport development, and the photos show what gets lost if they do it)

John

**Rayzur** · Sep 8, 2012 19:46

Okay, I see what your dilemma is now.

I've got an idea, let me see if I can get something to work for you.

**johnh1960** · Sep 8, 2012 20:17

thankyou - very much appreciated!
J

**Rayzur** · Sep 8, 2012 20:39

This should get you pointed in the right direction.

I cleaned out all those   characters you were using to line up your pagination with. It just needs a margin on the anchor.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#wrap {
    text-align:center;/*center the .caption div*/
    background:#EEF;
}
p {margin:0;}

.caption {
    display:inline-block; /*shrinkwrap the div to fit the image*/
}
p.imgwrap {
    padding:10px 0;
}
.caption span {
    display:block;
    margin:0 12%; /*this makes up for the missing 24% of the img width*/
    padding: 5px 0;
    text-align:right;
    background:tan;
}
.caption img {
    vertical-align:bottom;
    width:76%;
}
p.nav a {
    margin:0 100px 0 0;
}
p.nav a + a {margin:0}
</style>

</head>
<body>

<div id="wrap">
    <div class="caption">
        <p class="imgwrap">
            <img src="http://www.stopwiltonairport.org/photos/photo4.jpg" alt="">
            <span>Misty woods near Wilton, photo: Fiona Bullivant</span>
        </p>
        <p class="nav">
            <a href="#">Previous</a>
            <a href="#">Next</a>
        </p>
    </div>
</div>

</body>
</html>

**johnh1960** · Sep 8, 2012 21:52

Thankyou very much for that. But it seems to no longer scale the image height. Was that intended?

Ive uploaded your code here (ill leave it there while this thread is active):

http://www.stopwiltonairport.org/photo4test.htm
cheers
John

**Rayzur** · Sep 9, 2012 12:09

But it seems to no longer scale the image height. Was that intended?

Hi John,

It is still scaling in width and height. As long as you just change either width or height of an image (not both) it will scale in proportion.

If you will play with your browser window (viewport) and keep it open in proportion to the image you will see the scaling without scrollbars appearing.

If you make your viewport extremely short or extremely narrow you will get scrollbars, as with any page. The same thing happens to your original page if it is one extreme or the other.

Here is an old demo of mine, it's really a much more robust way to scale the image. It uses max-width on the image's parent to do the scaling, then you just set the img to width:100%. That means 100% of the parent's width. Were scaling the image via CSS instead of using the width or height attributes on the html <img> tag.

Here is a re-write of your page using that method. I have included all the elements on your original page.
With a couple of hacks this is working in IE7 also.

Hope that helps

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#wrap {
    max-width: 900px;/*this sets the p.home link -150px left of the image (on wide screens)*/
    margin:0 auto;
    text-align:center;/*center the .caption div*/
}
h1 {
    font-size:1.7em;
    margin:.5em 0 0;
}
p.home {
    margin:0 0 .5em;
    text-align:left;
}
.caption {
    display:inline-block; /*shrinkwrap the div to fit the image*/
    padding:2px;
    background:#000;
}
.imgwrap {
    max-width: 600px; /*max width you want image to be*/
    min-width: 240px;
    padding:2px;
    background:yellow;
}
.imgwrap img,
.imgwrap span {
    display:inline-block;
    vertical-align:bottom;
    width:100%;
}
.imgwrap span {
    padding: 5px 0;
    text-align:right;
    font-size:.8em;
}
.index {
    background:wheat;
}
.index a {
    display:inline-block;
    vertical-align:bottom;
    padding:5px 80px 5px 0;
}
.index a + a {
    padding:5px 0;
}
/*=== IE7 Hacks ===*/
*+html .caption,*+html .imgwrap img {display:inline;}
*+html .imgwrap span {float:right}

</style>
</head>
<body>

<div id="wrap">
    <h1>Stop Wilton Airport</h1>
    <p class="home"><a href="index.htm">SWAG Home page</a></p>
    <div class="caption">
        <div class="imgwrap">
            <img src="http://www.stopwiltonairport.org/photos/photo4.jpg" alt="">
            <span>Misty woods near Wilton, photo: Fiona Bullivant</span>
        </div>
        <div class="index">
            <a href="#">Previous</a>
            <a href="#">Next</a>
        </div>
    </div>
</div>

</body>
</html>

**Rayzur** · Sep 9, 2012 12:58

You can also force the image to start scaling after the viewport gets below the max-width:900px; that I had set on the #wrap div.

Working from the code I posted above - simply add a % lt. & rt. margin to the .caption div and it will scale to any viewport resize event under the #wrap max-width.

Code:

.caption {
    display:inline-block; /*shrinkwrap the div to fit the image*/
    margin:0 15%;
    padding:2px;
    background:#000;
}

I think that is the effect that you are after.

**johnh1960** · Sep 9, 2012 13:39

Ray - its close, and I can see it scales as I reduce the width of the window, but im not seeing it scale if I reduce the window height only, it stays as a 600x400 image, with the bottom below the window and the vertical scroll bar appears.

On my original hacked version, a purely vertical reduction in window height changes the scale and the image and links below stay in the frame. That is the reason I am using the scaling feature, otherwise Id just use fixed size and its all easier(im using !E9 on Vista, I also test on an Ipad and a Chrome/Win7 machine).

But, you have very generously given me some excellent code there. The caption is doing exactly what it should. Lots for me to learn from - Im going to study what you have written and its a big help, thankyou.

John

**johnh1960** · Sep 9, 2012 14:12

To show what I'm seeing, here is a screen shot of two browser windows, both reduced in height to about 1/2 of my screen height. The top shows your latest code, with the image staying at max size and lower half cut off (scrolling down, the caption is fine), and below is my version, where the image has scaled as intended and the caption and links can be seen (but with the caption not aligned):

cheers

John

**Rayzur** · Sep 9, 2012 22:29

I hate to say it but I don't think you can pull this off with just CSS.

Your version has the image as a direct child of an element with a fixed height, the body at 100%. That is the only way a % height will work on an <img>.

The problem with that though (as you know) is that you lose control of the ability to line up your credit text. That is why I was using inline-block as a shrinkwrapping parent.

If you use a CSS only solution you will have to decide which is more important, lining up the text or scaling the img height.
The simplest solution to fit both of your needs would be to let javascript resize the img.

I got pretty close by setting all elements as children of a 100% height parent. Unfortunately it requires a refresh after each viewport resize to straighten it back out due to the #wrap div being set as inline-block. It only lines up the text to a certain point, the height resize on the img just scales it too much, too quick, for the credit text to line up.

You might be able to use a centered float to shrinkwrap the #wrap div, that method requires an extra div though.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
html,body {
    height:100%;
}
body {
    margin:0;
    text-align:center;/*center the #wrap div*/
}
#wrap{
    display:inline-block;
    height:100%;
    background:#EEE;
}
h1 {
    font-size:1.7em;
    margin:0;
}
p {margin:0;}

p.home {
    margin:0 0 .5em;
    text-align:left;
}
.imgwrap {
    height:60%;
    background:yellow;
    text-align:right;
}
.imgwrap img {
    height:100%;/*this is 100% of 60%*/
}
.credit {
    padding: 5px 0;
    text-align:right;
    font-size:.8em;
    background:yellow;
}
.index {
    background:wheat;
}
.index a {
    display:inline-block;
    vertical-align:bottom;
    padding:5px 80px 5px 0;
}
.index a + a {
    padding:5px 0;
}


</style>
</head>
<body>

<div id="wrap">
    <h1>Stop Wilton Airport</h1>
    <p class="home"><a href="index.htm">SWAG Home page</a></p>
    <p class="imgwrap"><img src="http://www.stopwiltonairport.org/photos/photo4.jpg" alt="describe the image"></p>
    <p class="credit">Misty woods near Wilton, photo: Fiona Bullivant</p>
    <div class="index">
        <a href="#">Previous</a>
        <a href="#">Next</a>
    </div>
</div>

</body>
</html>

**ronpat** · Sep 9, 2012 22:34

Give this a try.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<!--
COMMENTS:
1. Images used:
     photos/texture.jpg
     photos/photo4.jpg
2. Image responds to Vertical resizing of window.
3. SWAG Home text aligns at left edge of image.
4. Photocredit text aligns at right edge of image.
5. All of the css for this demo is on this page.
6. Sticky Footer puts the "Prev" and "Next" buttons at the bottom of the viewport.
     Buttons can overlay the image if screen height is sufficiently reduced.
7. SWAG Home text is a bit jumpy in FF when page is resized; smooth in IE8.
-->
<head>
<title>Stop Wilton Airport Group - photo4X</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css;">
<style type="text/css">
body {
    background-color:#101010;
    background-image:url('photos/texture.jpg');
    color:white;
    font-size:100%;
    font-family:"Times New Roman", Times, serif;
    text-align:center;
}
html, body {
    height:100%;
    margin:0;
    padding:0;
}
h1 {
    border-top:36px solid #fff;    /* part of "sticky footer" */
    font-weight:bold;
    font-size:2em;
    line-height:40px;
    font-family:Impact, "Arial Black", sans-serif;
    font-style:normal;
    padding:5px 0px 0px;
    margin:0px;
}
.outer {
    height:100%;
    margin-top:-36px;              /* part of "sticky footer" */
}
a {
    border:1px solid #888;
    border-radius:6px;
    font-size:0.8em;
    line-height:100%;
    font-family:Arial;
    text-decoration:none;
    padding:2px 12px 3px;
    margin:0px;
}
.linkhome a {
    border:none;
    padding-left:0px;
}
a:link {color:#cccccc;}
a:visited {color:#cccccc;}
a:hover {
    color:yellow;
    text-decoration:underline;
}
a + a {margin-left:120px;}
img {
    height:70%;
    padding-top:24px;
    padding-bottom:5px;
}
.scene {
    position:relative;
    word-spacing:-.35em;
}
.linkhome {
    display:block;
    position:absolute;
    left:0px;
    word-spacing:normal;
}
.photocredit800 {
    display:block;
    position:absolute;
    right:0px;
    color:#999;
    font-size:1em;
    word-spacing:normal;
}
.footer {
    height:36px;          /* part of "sticky footer */
    text-align:center;
    position:relative;    /* positions "Prev" and "Next" buttons above image */
}
</style>
</head>
<body>
<div class="outer">
    <h1>Stop Wilton Airport</h1>
    <span class="scene">
        <span class="linkhome"><a href="#">SWAG Home page</a></span>
        <img src="photos/photo4.jpg" alt="">
        <span class="photocredit800">Misty woods near Wilton, photo: Fiona Bullivant</span>
    </span>
</div>
<div class="footer">
    <a href="photo3.htm">Previous</a>
    <a href="photo5.htm">Next</a>
</div>
</body>
</html>

**johnh1960** · Sep 9, 2012 23:53

Good grief.. that is clever stuff!

I might work with that last version. Its not really so important that people can change their browser windows on the fly, just that when they first open it that it looks fine on whatever they are using. Also, once Ive put in my colour scheme, the borders and margins wont appear so I think if they do resize, it wont look too quirky.

Thanks heaps - I'll post a link to my version of it FYI when I have it.

cheers

John

**johnh1960** · Sep 10, 2012 00:04

My last post crossed with yours - thats even better! This is your last code. Ill check it out on a few different devices:

http://www.stopwiltonairport.org/photo4test2.htm
Thanks again!
J

**ronpat** · Sep 10, 2012 00:16

Thanks for the feedback. Looking forward to seeing the 'live' page.

**johnh1960** · Sep 10, 2012 00:55

Thanks to Ray and Ron for the generous help - I will learn much by studying this coding

John

**ronpat** · Sep 10, 2012 01:34

Looks like the Prev and Next buttons flow beneath the image instead of over it when the browser reads the page from the server. Maybe a point or two of well-aimed z-index will fix that. Scaling of the image and text alignment seem good. Thanks for the look.

**johnh1960** · Sep 10, 2012 16:29

I think Ill probably go with this format and style:

http://www.stopwiltonairport.org/photo4test2c.htm

It seems to do everything I wanted. I liked the sticky footer, but decided I prefered without in the end. Ive moved the css into my main style file, so im ready to replicate this on the other similar pages

cheers

John

**ronpat** · Sep 10, 2012 16:58

Glad to see it's working for you. I'll check the home page in a few days.

**Paul O'B** · Sep 21, 2012 05:48

Hi,

Just for fun here is my take on the problem based partly on Ronpats code above.

http://www.pmob.co.uk/temp/ronpat2.htm

Works in IE8+ but IE9 needed a helping hand strangely enough. I've given ie7 its own rules as it doesn't play ball with the above.

**ronpat** · Sep 21, 2012 16:14

Just for fun here is my take on the problem based partly on Ronpats code above.

Incredible!

Thank you for looking at this post. I'm still giggling <grin>. It should have been obvious that the sticky footer stuff was completely inappropriate, but I was distracted by it's glitter... what can I say.

A queston, please... what determines the left position of ".linkhome"? I can break it

but don't understand what makes it work. I can see that if ".linkhome" is inside ".scene" it become jumpy in FF when the height of the window is changed, but outside it's rock stable.

You mentioned that you based your code loosely on mine. Is there another way to achieve this result that would be worth comparing? If not, no biggie; just curious.

Looks like you had a gorgeous holiday.

Mr. Paul, you are, in a word, inspirational!

Thank you.

**johnh1960** · Sep 21, 2012 16:49

its interesting stuff this, thanks for the further exploration. This was my finished version - each album will lead into pages with the code discussed:

http://www.stopwiltonairport.org/photos.htm

John

**ronpat** · Sep 21, 2012 17:16

Hi, John. Sorry, I crashed your thread.

Paul was on holiday when you posted your issue. He popped in today at my request because because when working on your problem, I had originally wished to use 100% height on the images rather than 70% but was unable to make it work, so I asked him if he would be kind enough to review your thread and determine if it could be done. For me, it remained an unresolved challenge. You are under no expectation to continue following this thread unless you wish. Your site looks and works nicely as is.

Ron

**Paul O'B** · Sep 22, 2012 09:46

Originally Posted by ronpat

A queston, please... what determines the left position of ".linkhome"? I can break it :D but don't understand what makes it work. I can see that if ".linkhome" is inside ".scene" it become jumpy in FF when the height of the window is changed, but outside it's rock stable.

The position of linkhome is controlled by the fact that the image and the text are originally centred due to the text-align:center on the parent. If you remove the absolute position from linkhome you can see where it will sit normally which is to the left of the image buut at the bottom becomes of vertical-alignment. Once linkhome becomes absolutely positioned with auto positions used it then will appear in the same place that it would have been (but without the vertical-alignment and will appear at the top) but just become removed from the flow allowing the image to slide back and be on top of it. I just them moved the text out of the way with margins thus leaving it auto positioned.

As the image shrinks or grows the text will move with the auto position because although it is removed from the flow it has not explicitly been positioned.

You mentioned that you based your code loosely on mine. Is there another way to achieve this result that would be worth comparing? If not, no biggie; just curious.

I came close with a few methods and indeed had linkhome inside .scene but like your demo it jumped in Firefox. Ie9 and chrome were actually rock solid so it is a Firefox bug. Moving the linkhome outside of scene fixed all the browsers except ie9 (ie8 was ok) so I had to use another method for ie9 by just making the element not take up any apace but not be absolutely positioned - almost effectively the same thing.

To get the 100% height between two other elements you probably will need the absolute middle section because with absolute elements you can say top: xx and bottom:xx and then you can still have 100% height for the inner elements that refer to the absolute elements height.

You can do similar with a sticky footer and dragging the outer upwards but you still need an absolute element nested to create an inside area so that 100% can be used for the image. As the inner section will never exceed 100% then there's no need for the sticky footer version as the page will never grow past the viewport.

Looks like you had a gorgeous holiday.

Yes thanks, it was great and although I've only been back a week it seems like a long time ago now :)

User Tag List

Thread: Images and caption scaling and alignment

Thread Tools

Display

Images and caption scaling and alignment

Bookmarks

Bookmarks

Posting Permissions