[Phpwebsite-developers] Wide images

[Shaun M. <sh...@ae...>]

Today I was wondering how to stop people from posting overly wide 
images in content such as a forum and came across a solution that 
mostly works. This is for people using <img src="blah.jpg" /> rather 
than uploading images to modules that support images.

The max-width CSS property is really handy at limiting the size of an 
element but IE doesn't support it. IE however does have something that 
works in a similar way but uses an 'expression' which is unique to IE.

Here's the CSS ...

.posting img {
max-width:400px;
width: expression(this.width > 400 ? 400: true);
}


Mozilla, Firefox and Opera pick up max-width and will scale an image to 
400px wide if it's more than 400px.
Safari will too but bizarrely doesn't scale proportionally so the 
height stays the same. I hope Apple fix this at some point. I've not 
tested on MacIE but with MS killing that off and now also the MSN 
client that contained the old MacIE core, that's academic.

IE doesn't understand max-width so uses the width:expression and scales 
the same as if it knew max-width.

I used this in a phpwsBB template.

in view.tpl, around the BODY tag, stick a <div class="posting">...<div>

I got the idea from http://www.svendtofte.com/code/max_width_in_ie/ 
which also gives details for line lengths.

Thought I'd pass this on. It's very handy if you're using a fixed 
layout or don't want your page going extra wide and one of the cleanest 
css hacks I've seen in a while.




Shaun
aegis design - http://www.aegisdesign.co.uk