Images and caption scaling and alignment

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

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?

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

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.

thankyou - very much appreciated!
J

This should get you pointed in the right direction. :wink:

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

<!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>

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

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 :slight_smile:

<!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>

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.

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

I think that is the effect that you are after.

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

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

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.

<!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>

Give this a try.


<!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>

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

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

Thanks for the feedback. Looking forward to seeing the ‘live’ page.

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

John

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.

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

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