MyBB Community Forums

Hi all,

I recently created a MyBB community, but currently, whenever a user posts an image (using [IMG] tags) the image is greatly reduced in size. 

Here's a demonstration of what happens currently (keeping in mind the original image is around 1920 x 1080):
http://i.imgur.com/LTtz5VR.jpg

What I need (sorry for the crude MS Paint job):
http://imgur.com/zl0Nmz8.jpg

I need images to show at their original size, but then be scaled down if they exceed the max width of the post body.

I am currently using the theme "Osmium". The global.css says:

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

My board version is 1.8.7

This issue occurs with all, including the default MyBB one, except for one theme called Rush.

Any help would be much appreciated, 

The Armchair Soldier

Well if you want to scale to full size then it should be min-size:

.scaleimages img {
    min-width: 100%;
}

Worked! Many thanks.

---

Scratch that; now posted images look like this for some reason:



The width is now stretched to fit the post body no matter what

Can't think of any reason why this won't work for you. You only need to make sure that you have class scaleimages in your code, or make sure that it has not been removed. Can you post a link to your site ?

Sure. Here's a link to my site: http://pc-roleplay.com/index.php

To clarify, I am supposed to edit the global.css of Osmium? Or should I be editing the one belonging to the default MyBB theme?

Can you link to the thread where the image is ?

You should check the postbit and postbit_classic templates for:

<div class="post_body scaleimages" id="pid_{$post['pid']}">

Here's a thread with some images:
http://pc-roleplay.com/showthread.php?ti...d=41#pid41

I have removed the "min-width" from the css so the images are appearing how they were when I posted this thread.

I found this in postbit:

 <div class="post_body scaleimages" id="pid_{$post['pid']}">
 {$post['message']}
</div>

And I found this in postbit_classic:

<div class="post_author scaleimages">
 {$post['useravatar']}
<div class="author_information">
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
<span class="smalltext">
{$post['usertitle']}<br />
{$post['userstars']}
{$post['groupimage']}
</span>
</div>
<div class="author_statistics">
{$post['user_details']}
</div>
</div>

And:

 <div class="post_body scaleimages" id="pid_{$post['pid']}">
 {$post['message']}
</div>

maybe the problem is when you upload the images:

Do the following when you insert an image and see how it looks:

1) Go to postimage.org

2) Choose the image from your PC - be sure to leave the default settings as is, which is to not resize the image.

3) Copy the link that appears in the direct link textbox.

4) Paste the above link into the URL textbox when you upload an image - leave height and width empty.

(2016-08-02, 02:54 PM)Ashley1 Wrote: [ -> ]4) Paste the above link into the URL textbox when you upload an image - leave height and width empty.

Sorry, what do you mean by this?

Your HTML tag is being assigned a size tag:

<img src="http://atgyos5wag90b2j1y2tldc5jb200.g00.photobucket.com/g00/TU9SRVBIRVVTMyRodHRwOi8vaTgyOS5waG90b2J1Y2tldC5jb20vYWxidW1zL3p6MjE4L2xpYW1jbGFya3NvbjEvUm9ja3dlbGwlMjBkdmRzX3pwc3YwanY1b3h3LnBuZw%3D%3D/$/$/$/$" width="300" height="250" border="0" alt="[Image: $]">

I would recommend searching your templates for somewhere where image_size is defined or such.
When uploading your image like so:
http://puu.sh/qnfIC/68c276c336.png

you can try setting the height / width to what the image should be