Here’s basically the code I’m using for the website:
On every non-IE browser I’ve looked at, the image (which is over 2000 px in width) will shrink and fit within the td, but IE likes to show it in its full size, thus creating the annoying horizontal scroll bar.
I’ve also thrown the width attribute into a CSS class, but that didn’t work either.
Any suggestions before I just give up, resize the image to something smaller and throw the small image on there?
-
-
When you use tables and set the cell width and then set the width of an image in that cell, it means that the image will be 100% of a 70% wide cell.
NEVER set images that way as you need to properly code the image tag and keep in mind what the aspect ratio (width:height) is unless the image is a repeatable image.
Ron -
Try the following hack — report back how it works.
EDIT: Yes, you can use either the “width=100%” or “height=100%”, and browsers other than IE6 will scale the image to the size of the containing div, plus preserve the aspect ratio.
But remember, it still has to download the entire image, which can be time-consuming, depending on connection speed. So, unless you’re anticipating that most of your customers have a VERY LARGE monitor, and a VERY FAST connection, you might want to consider scaling that image down anyway.
Probably 1280 px wide is plenty big enough for most purposes.
Leave a comment
Recent Comments
 |
You’re making the image’s width 100%. That means, the image is 100% its normal size. If you change to a value like 50%, the image will be twice as small. You can add a height attribute to do the same vertically.
Or, you can make your td a scrollbox so the image stays its full size, but the scrolling action happens inside the td, not the whole window.