Images and caption scaling and alignment

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.

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 :smiley: 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.

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

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

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

Just wanted to revive this thread, which helped me a lot last year.

It was about how to solve some issues with presenting a photo image, scaled to a maximum proportion of a browser window, with captions and controls positioned neatly around it. At reply 23 above, I link to the final result.

Anyway, for another website with a simlar format, Ive been experimenting with optimum file size and definition for this format. The thing is, this web page format will always rescale the served image file, to get it to fit best in the window. That way, everyone gets as big a view as they can see, that also fits properly.

But the question is, what image definition and file size is best? Clearly a fixed image size, served at that definition is sharpest/most efficient, but that does not include rescaling. With jpg files, you can trade off pixel count and colour and compression for a given file size - eg, more pixels but higher compressuion.

So I did some tests. taking an image which will likley end up been scaled to about 550 to 650 pixels high, I found that a suitable initial scale was 800 pixels high, and no significant benefit from going to 1000 pixels. I was using a fairly highly compressed file size of 80k for a 3:2 format image. Keeping with that file size, and testing different file definitions, the 800 high was best, 1000 was similar and 1350high was having trouble, going blocky and losing colour gradation. All of that was based on viewing the result at about 600 pixels

Given a browser scaling to about 600pixels (but not exactly), with an 80k file, its better to start with a 800high image than to scale the image file to 600, and then have the browser rescale a bit more. I also tried the same allowing file size to grow to 120k, but again no significant benefit.

So my rule of thumb for dynamically rescaled images, also keeping file size down:
Start by scaling a photo to about 25 to 35% higher def than it is likley to be shown at, I was using 80k for a 1200x800 image file, and that works OK as a good compromise between file size and clarity. Other image sizes prorata the file size by the pixel count.

cheers
John

Thanks for the update and your findings:)

I think the point is to find a happy medium ground so that at most common sizes the image looks good and then at scaled sizes doesn’t look too bad. You could start with a large image and scale down but then you have a larger file size to start with and it often doesn’t look any better at small sizes.

You can also improve the quality of scaled images with some experimental CSS. It [URL=“http://www.devthought.com/2009/03/13/tip-high-quality-css-thumbnails-in-ie7/”]works in IE also.

As an aside for mobile retina displays it looks like the image size should be doubled.