SummitPost.org

Ok so currently I got it pretty good as seen here:
http://www.summitpost.org/mount-shuksan ... ing/696383

Code: Select all

<div style="height:583px;width:540px;overflow:scroll;">
<img src="http://images.summitpost.org/original/696383.jpg" border="0" width="auto" height="550" /><br/></div>

But it does not seem to want to display in Internet Explorer. So I suppose auto is not supported at times. I've tried all sorts of tricks with html to make it 100% width and scrollable, but unfortunately it then makes the div container stretch to 100%.

For those who cannot see the image in the above example, I'm trying to figure out a html code that will allow me to have it so people can conveniently scroll through my panoramas from left to right using a scroll bar. I want the container it self to fill up most/much of the screen in width and be around 583 px in height which I already have set up. But the complicated part is displaying a picture inside the div container to be automatically resized to fit the height of the container.

Example:
Let's say The container is 500 px by 500 px. The picture is 2,000 px by 1,000 px. The container would display it as 1,000 px by 500 px because it is automatically resizing the picture to fit the proportions of the container. As I said, I already have it "working" in the code near the top but it does not work in ie8. If anyone has any hinters, this would be nice for my future panorama postings.

I still use the code I published here but don't ask for explanations. It's been too long since I wrote the article and I'm not sure I ever understood everything completely.

Gangolf Haub wrote:I still use the code I published here but don't ask for explanations. It's been too long since I wrote the article and I'm not sure I ever understood everything completely.

Yep, I used that article when some time ago I started fiddling around with big pictures myself. I just had a look at one that I created, and it works in IE 9 and in Google Chrome. However, I wasn't trying to resize the picture, I simply used the original size and put scroll bars around it. Not only is that easier, it also avoids downloading way too much, because resizing an image using the img width or height tags happens client side, after downloading a few MB's - instead, I post the picture in the size that I want to use it afterwards. Anyway, apart from resizing the image, my code was similar to yours. I've done a bit more fiddling, and here's what might be the solution to your problem:

Code: Select all

<div style="height:583px;width:540px;overflow:auto;">
<img src="http://c0278592.cdn.cloudfiles.rackspacecloud.com/original/677547.JPG" border="0" height="550"><br></div>

This works in IE 9 and Google Chrome. Compared with the original code, there are just two relevant changes:

1) There is no width attribute in the img tag. My guess is that by giving a height tag I'm giving the browser enough information to scale the image and work out the width accordingly. Why IE screws things up when there is also a width tag while Chrome does just fine, I don't know.
2) The div tag uses overflow:auto instead of overflow:scroll. It's only a small difference, but by trial and error I learned that 'scroll' gives a vertical scrollbar, which isn't necessary since the image already fits, whereas 'auto' does not.

Good luck,
Rob

Alright! It works! Thanks rgg! My problem was that I would be setting the width each time for the image, and ie does not support nothing nor auto, but when not even putting in the attribute it works!

Here's the pano in action!:
http://www.summitpost.org/view_object.p ... #chapter_3

So Gangolf, I appreciate your effort into showing me your article (which I've read before) but there is a fundamental flaw in the code that makes it only work for smaller panorama's. Here's a sample of what I'm talking about:
http://www.summitpost.org/view_object.p ... #chapter_1 (and yes it links to yours because I didn't change the code that much) Notice how you have the annoying vertical scroll bar. And I've tried other tricks before as seen in this thread:
http://www.nwhikers.net/forums/viewtopic.php?t=7994702

My friend Gimpilator all these years has been resizing his pictures (which looses details as a result) because of this issue. And I'm sure he's not the only one. Now the mystery is solved!

Josh Lewis wrote:My problem was that I would be setting the width each time for the image

If you set only the height, most (all?) browsers scale down an image evenly while maintaining aspect ratio.
overflow:auto shows scrollbars if an element has overflowing content, whereas overflow:scroll always shows scrollbars even if there is no overflowing content.
Just thought you may find this useful to know.

edit:
so in your first example, if you set the image height like

Code: Select all

<img src="http://images.summitpost.org/original/752942.jpg" style="height:575px;" />

you should have no vertical scroll bar.

Yup, already did that before I read your message. But there is yet one more problem. This one has to do with summitpost itself not working properly with the code:

Code: Select all

<div style="height:100%;width:100%;overflow:auto;"><br/><img src="http://images.summitpost.org/original/752942.jpg" border="0"  height="550" /><br/></div>

This code works perfect when using a .html document on my desktop using firefox, but then on sp it does not work as seen here:
http://www.summitpost.org/experimental-test-page/753371

Ok so in the worst case scenario I could manually set the div size in px, but this is also a problem because I know some people have big screen resolutions (and big screens) which they are bound to use a higher pixel height than my monitor. So is there a way to have the div container now only stretch to 100% width of the screen rather than 100% width of the picture? All that needs to take place now is for the scroll bar to appear in the div and have it so that it does not make a scroll bar for the page itself.