5 replies [Last post]
Arkkimaagi
Offline
Regular
Last seen: 16 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-05-11
Posts: 29
Points: 0

Ever had a forum, comment area or even a guestbook where people can link images? Any of you noticed the problem of too big images breaking the layout?

Here's a suggestion to solve this problem:
Using max-width (and maybe even max-height) to scale the image down to acceptable range.

Oh no, internet explorer does not support max-width nor max-height..

no problem, lets use expressions:

#content img{
	max-width: 500px;
	max-height: 600px;
	letter-spacing: expression(((this.width>500)?this.width=500:null)?"normal":"normal");
	word-spacing: expression(((this.height>600)?this.height=600:null)?"normal":"normal");
}

Change the #content to a more appropriate id, one that's holding the text written by users. Also, if you want the max-width to be 100px, change all values of 500 to 100.

It might not validate, but I think there are some ie hacks around that can help this to validate. Also other browsers should not mind, as they do not understand expressions. I have not tested this in other browsers than ie6 and firefox 0.8

Please let me know what you think of this idea.

~ Arkkimaagi ~
Experto credite

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Possible solution: Too big images breaking forum layout?

Hi Arkkimaagi,
Interesting solution.
I assume you need JavaScript enabled to use these expressions.

There are a couple of other way you could do similar things.
One I have used lately is the addRule funtion it's another IE only solution

var thesize="500px"; 
document.styleSheet[0].addRule("#content img", "width:"+thesize);

Arkkimaagi
Offline
Regular
Last seen: 16 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-05-11
Posts: 29
Points: 0

Possible solution: Too big images breaking forum layout?

I was aiming for a CSS solution, or one that can be delivered using css file.

I did not know about your way of doing it. I've found the javascript - CSS relation somewhat undocumented.

~ Arkkimaagi ~
Experto credite

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Possible solution: Too big images breaking forum layout?

Hi Arkkimaagi,
Both solutions are proprietary solutions so not really a good way to go.

Here's a good place to start with the DOM http://www.mozilla.org/docs/dom/domref/

Another easy way if you know the id of the image would be document.getElementById("imgid").style.width="themaxwidth";
or for all images inside a div

var content=document.getElementById("content"); 
var allimg=content.getElementsByTagName("IMG"); 
for(var i=0; i<allimg.length; i++){ 
   allimg[i].style.width="thewidth"; 
}

Arkkimaagi
Offline
Regular
Last seen: 16 years 48 weeks ago
Timezone: GMT+2
Joined: 2004-05-11
Posts: 29
Points: 0

Possible solution: Too big images breaking forum layout?

Btw. All the examples you've posted do not work inside .css file, and they also change the small images, and that's not wanted.

It's good to know thou about the ways to referr to stylesheet instructions.

~ Arkkimaagi ~
Experto credite

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Possible solution: Too big images breaking forum layout?

Yes the examples I have given are DOM, JavaScript solutions that can't go in a CSS file.