Topic: Images In Custom HTML Block

[newtoallthis]

XP SP3 SMF 2 RC5 SP 2.3.3

I've got a custom html block centrally on the portal page of my forum.

I want to display an image in that block so that the image fills the block regardless of viewing screen size and resolution.

The image is 640 px wide x 480 px high and is hosted by Photobucket.

If I set the image width in HTML to 100% but leave the height as 480 px, it works well on my 19" screen but on a 10" netbook the image fills the width as you'd expect but forms a block 480 px high leaving a large blank area over the image.

If I also set the height at 100%, the whole image dramatically shrinks and on my screen nowhere nearly fills the available block.

What height setting and format (set number of pixels and % don't seem to work) would you recommend to force the height of this block to expand just enough to permit the image to be displayed in perspective and just to fill the block?

[AngelinaBelle]

This is not a SimplePortal support issue.
I am no great expert at this sort of thing.
You don't care about the aspect ratio of the image?
 
It seems that width=100% is going to work, since the width of the block depends on the width of the browser window and/or the width of the other columns in your portal.
 
But, since the height of the block actually depends on the height of the thing inside, and you've just told the thing inside that its height should depend on the height of the block -- how is your poor browser going to figure that one out? It has to recognize the "infinite loop" problem and just pick a value somehow.
 
I did a little googling. Some of the stuff here: http://www.dynamicdrive.com/forums/showthread.php?t=28888 related to using a little javascript to learn the actual area available and setting the height or width of the img accordingly.
 
and here: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/ (about how % height and width is relative to the size of the box the <img> is inside, which is an "infinite loop" problem, since the height of the html block depends on the size of its contents).
 
You can try a little googling, too.
And you can probably find more and better help from the larger community of CSS experts who discuss themes and graphics at simplemachines.org.
 
Good luck!

[newtoallthis]

Just got back to this. It's a matter that still requires resolution.

Thank you for such a comprehensive reply. There's much there to give me a good lead. 

Incidentally, I do care very much about the perspective of the image. That's the point I tried to make in my final paragraph. Apologies if I didn't explain myself adequately.

[AngelinaBelle]

If you set only width or only height, you will preserve the aspect ratio.
 

[newtoallthis]

If you set only width or only height, you will preserve the aspect ratio.

I'm trying to fill the full width of a central block with a slide show from a file host. I reasoned that the available width would vary from PC to PC dependent upon screen size and resolution. So I chose 100% as the width.

I hoped that this would then force the block to expand to the correct height to accommodate the slide show at its natural aspect ratio (800 px by 532 px).

However, if I don't stipulate a physical height for the block, overall image size shrinks dramatically, as though the code loses its ability to 'push up' the block height to a height where the image can utilise 100% of available block with.

Hope that makes sense.

 

[AngelinaBelle]

I'm not sure what is keeping it from using 100% of available width. Please provide a link.

[newtoallthis]

I'm not sure what is keeping it from using 100% of available width. Please provide a link.

That's the thing. It always uses 100% of the width but only if I set the height at a set number of pixels, say 520 px. Trouble is then, on a smaller screen, the slide show is 100% wide but the block is too high with only part of the height being utilised by the slide show.

The currently used code is as follows:-

Code: [Select]

<div style="width:100%; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w1233.photobucket.com/pbwidget.swf?pbwurl=http%3A%2F%2Fw1233.photobucket.com%2Falbums%2Fff400%2FLeigh-Lancashire%2F3f5c3796.pbw" height="520" width="100%"><a href="http://photobucket.com/slideshows" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn.gif" style="float:left;border-width: 0;" ></a><a href="http://s1233.photobucket.com/albums/ff400/Leigh-Lancashire/?action=view&amp;current=3f5c3796.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif" style="float:left;border-width: 0;" ></a></div>
The link is www.leigh-lancashire.com .

The objective is for the slide show to fill 100% of the available width (which it currently does) but for it to push up the height of the block just sufficient to contain the height of the slide show in its correct aspect ratio.

[AngelinaBelle]

You are a members-only site, and registration is disabled.

[newtoallthis]

You are a members-only site, and registration is disabled.

Good observation. 

Would it be impertinent of me to request an email addie by PM?

I'd forgotten that we'd disabled registrations until we can better protect our media content.

[AngelinaBelle]

Please set up a "test" account, and PM me the details.
I'll use it to take a look at your issue, and you can recycle the account when you are ready.
It's always handy to have a test "regular member" around for testing things.

[newtoallthis]

Please set up a "test" account, and PM me the details.
I'll use it to take a look at your issue, and you can recycle the account when you are ready.
It's always handy to have a test "regular member" around for testing things.

Thank you.

[AngelinaBelle]

Are you talking about the top block at http://www.leigh-lancashire.com/forum/?
The reason this thing does not behave like an image is that is not an image.It is an embedded flash "widget". I guess it is a slideshow viewer. Maybe it doesn't have a "natural" height or aspect ratio, the way an image does.
 
Does photobucket have any documentation about how you can tame this slideshow widget? Any options you can add to the URL, or set when you are setting up the album and/or slide show?