Forcing Image Resizing

One of the big items on our "To Do List" has been a way to solve images from breaking our website.

Because we have a fixed-width website design - at the moment - it is fairly easy to break the layout of the page by posting an image that is larger then what our fixed width design is setup for.

What happens is the main table with all the Blog text pushes out to the right-side of the page -- not good!

So we had a number of options before us:

[] Force people to use our own website for storing images (not something we want to do).
[
] Resize images on-the-fly (but causes long load times).
, Find a way via JavaScript or CSS to resize them.

Our entire development team spent the better part of this afternoon trying to find a viable solution to this issue.

Eventually one of us came across a blog entitled Max-Width and Faking it for IE which explains a way to to CSS to force a max-width of an object.

As the author correctly notes, "it's best to size an image accordingly", but in our situation that just was not possible.

Thankfully he provided to us the first solution that seems to be working in both Internet Explorer and FireFox under Windows.

We have not tested it under Mac, Linux, or other OS's, nor any browsers other then IE and FireFox, but would welcome some feedback if you happen to use something other then what we've tested it under!

As the author of the article explains, IE just does not support the CSS max-width feature, which is why he suggested using in-line Javascript within your CSS file using the syntax:


selector {width: expression(this.width > value ? value: true);}

Rather ingenious, eh!

Because we already have a CSS function that get's assigned to all BBCode Images it was just a matter of adding to more lines, and bam, now it seems to be working!


.ImageBBCode
{
text-align: left;
vertical-align: text-top;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #333;
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
}

Because any images over the size of 500 (or there-about) cause the fixed-design website to explode, we simply set the max-value at 500 pixels and we are good to go! (hopefully!!)

A great little designing time and thanks to the person over at for taking the time to blog about this!

@support
Christianblog Support @support ·

Thanks to my good friend Eric Coleman of [url]http://aplosmedia.com[/url] for [blog=blog/weatherwatch/solar-minimum-has-arrived/]testing out[/blog] this new method using both FireFox and Safari under the Mac OS!! He reports it works in both.

Do not include honorifics.
@christianblog

Recent Blogs By Christianblog Account

© ChristianBlog.Com 2019 Global Policies