The problem with huge images

[getbak]

Every so often, someone posts an image that is massive and it screws up the format of the whole page.

I've been updating my own website and have added this simple style to my CSS so that images don't screw up page formatting on smaller screens. Images display at their normal size up to the point that they exceed the width of their container, then they shrink to stay contained.

img {
	max-width: 100%;
	height: auto;
}

Adding this to the forum's CSS should prevent those big images from screwing up the page. It won't prevent people from posting them, and it won't save the bandwidth used to download them, but at least it will stop pages from being thrown out of whack by them.

I assume you have some ability to edit the forum's CSS, and this would be a very simple edit that won't add any burden to the page and doesn't require any plugins or Javascript.

[Mazrim]

Alternately, is there also a way to let the large image only stretch that one post, and the rest retain the original size? Skyscraperpage does that and it's great.

[photon]

Not with this forum software AFAIK Mazrim, or at least not without a much different template.

That's a good suggestion getbak, is there any potential downside? I can't think of any other than if there was something integral to the operation of the site that required images wider than the browser window but I don't think there are.

[getbak]

I don't believe there should be any downside. All images will display normally, this will just restrict those super-big ones from stretching too far. Since it's just CSS, it shouldn't have any impact on any other functions on the forum.

[photon]

Tried it and it fixes the big images, but for some reason it makes the icons in the editor disappear, so I reverted.

[getbak]

Ah, those images are in table cells without a defined width, so the max-width screws them up.

Try this:

.alt1 img {
	max-width: 100%;
}

That will only affect images in the message display fields. I tested it in Chrome and it seems to work without affecting the icons.

[photon]

Yeah seems to work.

http://forum.calgarypuck.com/showthr...wpost&t=138755

[getbak]

Woohoo!

[getbak]

I noticed a couple of places where images have also disappeared because they're in td tags with the alt1 class and undefined width...

• The Ivrnet logo at the top, and the "thread status icon" cell (the leftmost cell on the topics page) are both in cells with the "alt1" class but no defined size, so they disappear too.
  
  
• You could fix that either by changing the class on those cells to "alt2" (which seems to look exactly the same as "alt1"), or put a defined size on the img tags or the td cell.

I don't know how much control you have in editing those things.

[photon]

Good eyes, I took it back out for now. I might also be able to assign a class to the td cell for posts to reference that only, I'll have to look at the templates. I'll check it out.

[Finger Cookin]

Originally Posted by photon

Yeah seems to work.

http://forum.calgarypuck.com/showthr...wpost&t=138755

That image still stretches the page for me in Chrome, FWIW.

EDIT: Whoops, looks like this is still a work in progress.

[maverickstruth]

What about using a CSS3 attribute selector, like so:

div[id^=post_message_] img { max-width: 100%; height: auto; }

(If you're not familiar with the syntax, this only targets divs with an ID of the form post_message_XXXX, regardless of what the numeric string is on the end of the ID).

Should work in all modern browsers, and even in IE7+. IE6 would be left in the cold, but it would be no worse for those users than it is at present.

[photon]

That seems to work. I assume there's some kind of performance impact from using an attribute selector, but I also assume since we're only using one it probably isn't worth thinking about.