[Harry K.]

Hey Darth,

As some of you may or may not know, you can embed an image like so:

Code:

[img]url[/img]

However you should be able to specify a width and height too:

Code:

[img=50x50]url[/url]

This adds a width="50" and height="50" to the image tag. However in your global.css file you have the following class which is overwriting any custom image dimensions:

Code:

.scaleimages img {
   /* max-width: 100%; */
   height: auto;
   width: auto;
}

Now, the reason max-width is commented out, is because you also have the following, which overwrites the scaleimages:

Code:

#posts_container img {
   max-width: 100%;
}

Why do we use max-width and why is it required? The max-width: 100% is set to make sure that any image that is inside the post container is scaled to fit either the full size image, or the full size of the post container - which ever comes first. Without this, any image that has dimensions above that of the post container would completely break the page.

What's causing the custom dimensions to be overwritten? To put it simply, the scaleimages class. As we have already established the max-width attribute is obsolete due to the post_container img class. So the only attributes left are the height and width set at auto, this is requesting that the image uses its own pre-defined image dimensions.

Why does the .scaleimages class include the height: auto; width: auto;? I don't have a clue to be fair, as far as I'm aware it is not used in the default MyBB theme, so this has been added by Darth? As I'm not aware of his reasoning, and can't figure it out myself, so I deem this useless.

Solution? Remove the .scaleimages class from your CSS completely. Your post_container img class is handling the max-width attribute already, forcing any image regardless of original or custom dimensions to scale down to fit in the page. Any image smaller will hold it's original size or use the custom defined size.

PEAOYCE