Image Size Problem

Heya folks.

Hopefully this isn't too difficult to solve. Users on my forum have posted some images that are cut off by the right edge of the board:



There's a chunk of the image cut off by the line on the right.

Other than users resizing pics themselves, is there anyway to make a maximum picture size to fit the space of the board?

Cheers in advance.

Edit - And I've just noticed it happens here for me too. It's not a matter of screen width either, as it's happening to some users who have large screens.

it is a matter of your browser window's width. Everything wider than the post area will be cropped. The best solution for automatically resizing images within posts would be to put the code below into the text field in "Styles / Colors / CSS Stylesheet" and clicking submit. All images that are larger than the posts width, will be dynamically resized.

Code:

.postbody .content img{max-width:100%}

This of course, has also disadvantages - a better solution would be to tell your users to use thumbnail - links instead. A small preview supported by the most image hosts that links to the full sized image when you click the thumbnail.

Edit: btw, the code above eventually has to be altered if you are using phpBB version 2.0.

Code:

.postbody .content img{max-width:60%}

What size by size is that?

Sunny_D wrote:it is a matter of your browser window's width. Everything wider than the post area will be cropped. The best solution for automatically resizing images within posts would be to put the code below into the text field in "Styles / Colors / CSS Stylesheet" and clicking submit. All images that are larger than the posts width, will be dynamically resized.

Code:

.postbody .content img{max-width:100%}

Wow, great info. Now what about the forum's main logo? If it's too big for some browsers, will this code resize the logo as well? Or is there another code for that?

It will only resize images within posts....

Well, and to my knowledge a similar code wouldn't work for the header logo... at least I can't think of a solution at the moment, but I'll inform you when I stumble upon one.

Well I have the same problem.
This is great help sunny but one thing more friend.
when i put this code, image looks complete 100% but Image Pixels Not Looks Good. Its Effect On Image Pixels.
I watch some forums when post a high resolution pics The Post Size Automaticaly get a big siz and you can Scroll the page from ScrollBar left to right to watch complete image and its not effect on the post and also on the image pixels. Is there any solution.?

One More Question When I Submit an Img Or Smiley in new topic or post reply its show only the code but i want when i post reply and take an image or smily it should disply image in the box Before Send The Post. not cods is that possible.?
Thank you Soo Much.

Of course the image necessarily gets resampled when you use this code, but I think a resampled image is still better than a cropped one. Not sure about a good solution that uses scrollbars. But there is a manual solution. If you have an oversized image, use the following code in your posts instead using the [img] tags:

Code:

<div style="width:100%; height:100%; overflow:scroll;"><img src="IMAGE URL" /></div>

Your images posted that way will use scrollbars if their width exceeds the post borders.

For your second question, be sure that you have activated bbCode for that post (Profile / Preferences) and in general (Users & Groups / Users / User Settings).

Uber Lord wrote:

Code:

.postbody .content img{max-width:60%}

What size by size is that?

?

Thanks Sunny And Uber Lord.
Its Good I should Announce Click on image to watch full siz image in new window.

Uber Lord wrote:

Code:

.postbody .content img{max-width:60%}

What size by size is that?

Still not sure what you mean... this makes the images have a maximum size of 60% of the postarea's width.

Yep 60% looks some good.
i think its better.
and post looks good too.

I'm having the exact same problem. People uploading pictures and the right hand side being cut off. Can someone please tell me where I put this code into the CSS Stylesheet ?!?

.postbody .content img{max-width:100%}

I've put it in and I keep getting this error message:

Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.

Thanks in advance

Mythril