| Previous :: Next Topic |
| Author |
Message |
Josh Journey
a.k.a Josh Lewis
Joined: 01 Nov 2007
Posts: 4836 | TRs | Pics
|
Ok so currently I got it pretty good as seen here:
http://www.summitpost.org/mount-shuksan-with-a-lenticular-forming/696383
| Code: | | <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.
|
| Back to top |
  
|
|
Bedivere
Why Do Witches Burn?
Joined: 25 Jul 2008
Posts: 7464 | TRs | Pics
Location: The Hermitage |
|
Bedivere
Why Do Witches Burn?
|
 Tue Oct 11, 2011 3:11 am |
|
|
No one with any brains uses IE8 anyway. I wouldn't worry about it. 
|
| Back to top |
|
|
Brian Curtis
Trail Blazer/HiLaker
Joined: 16 Dec 2001
Posts: 1696 | TRs | Pics
Location: Silverdale, WA |
Remove width="auto"; from your img tag. That should fix it.
that elitist from silverdale wanted to tell me that all carnes are bad--Studebaker Hoch
that elitist from silverdale wanted to tell me that all carnes are bad--Studebaker Hoch
|
| Back to top |
|
|
Josh Journey
a.k.a Josh Lewis
Joined: 01 Nov 2007
Posts: 4836 | TRs | Pics
|
|
| Back to top |
|
|
Sore Feet
Member
Joined: 16 Dec 2001
Posts: 6307 | TRs | Pics
Location: Out There, Somewhere |
Your <img> tag isn't closed in the code you posted above. Strange that Firefox and Chrome render it correctly while IE doesn't.
|
| Back to top |
|
|
Josh Journey
a.k.a Josh Lewis
Joined: 01 Nov 2007
Posts: 4836 | TRs | Pics
|
Ok so I closed the tag now, with or without auto ie still cannot read it. 
|
| Back to top |
|
|
Sore Feet
Member
Joined: 16 Dec 2001
Posts: 6307 | TRs | Pics
Location: Out There, Somewhere |
Slightly odd, I thought that would have bugged it out more than it did. This works:
| Code: | | <div style="height:auto;width:540px;overflow:auto;"><br/><img src="http://images.summitpost.org/original/696383.jpg" border="0"/><br/></div> |
If you're going to specify the image size, Internet Explorer requires that both the height and width are there, or else it will render the image as if you're telling it to only show 0 pixels of one dimension.
|
| Back to top |
|
|
Josh Journey
a.k.a Josh Lewis
Joined: 01 Nov 2007
Posts: 4836 | TRs | Pics
|
Alright looking better! But now a new problem is created. Now there is a vertical scroll bar which isn't much but is a inconvenience (the user has to scroll up and down a little to see the full version). Now if I could just figure out that last part.
Edit: I just figured out a huge flaw in the html code you provided. On big pictures like this it displays too big:
 Looking West on Sahale
|
| Back to top |
|
|
Sore Feet
Member
Joined: 16 Dec 2001
Posts: 6307 | TRs | Pics
Location: Out There, Somewhere |
| Quote: | | <div style="height:auto;width:540px;overflow:auto;"> |
The red attribute will set the height of the box which bounds the image. Having it set to auto will fit it vertically to the size of the picture. If you want it smaller, just put a number in there. You'll get a vertical scroll bar though if the image is just 1 pixel bigger.
The blue attribute will automatically put in scroll bars where needed. If you set the box which bounds the picture to a specific size and the picture is bigger than that size, you will always get a vertical scroll bar. In the first instance you were working with, what Internet Explorer does is renders the scroll bars inside of the DIV box (Firefox, Chrome and Safari all render the scroll bars outside of the box, so it isn't an issue), so it overlaps the image, causing the vertical scroll bar to appear. If you want to compensate for this, just add 17 pixels to the height of the box and the vertical bar should disappear.
You could also add in the max-height:xxx; attribute, which will allow you to stipulate the maximum height the DIV area should render to. Pictures larger than said height will cause the vertical scroll bar to show up, smaller than said height should fit to the size of the box exactly (assuming you leave the height set to auto).
|
| Back to top |
|
|
Josh Journey
a.k.a Josh Lewis
Joined: 01 Nov 2007
Posts: 4836 | TRs | Pics
|
The good news is that I fixed up my code to work even better in firefox.
| Code: | | <div style="height:100%;width:100%;overflow:auto;"><br/><img src="http://images.summitpost.org/original/752942.jpg" border="0" width="auto" height="550" /><br/></div> |
The bad news is that it still doesn't work with internet explorer. (I know auto doesn't work with internet explorer ). So ok I figured out a way to get the div box to work perfect in both browsers, but one huge problem remains. What code makes it so that you can have an image display like this:
Height="500" px Weight="X".
X being the width based on keeping the image proportions with the 500 px.
Here is what I want it to look like (well for the most part):
http://www.summitpost.org/middle-chiwaukum-360-view/601315/c-437276
The problem here is that my friend Gimpilator had to manually resize his panorama's thus lowering the details which I am not in favor of doing.
I even tried adding a doc type to see if that would change anything. I used this reference:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Lately I been reading up into html and css to become more familiar with it (I've been for a while, but now I'm really understanding it).
|
| Back to top |
|
|
Josh Journey
a.k.a Josh Lewis
Joined: 01 Nov 2007
Posts: 4836 | TRs | Pics
|
|
| Back to top |
|
|
|
|
Too funny! I don't use internet explorer if that's what your wondering. But unfortunately some people still do. 
