The amount of space that images take on a page is controlled by the site’s HTML preferences (“Settings>HTML Preferences”). For example, images that appear within a page’s body text, are set by the “Page Image Size” setting in the “Images” preference screen. The default size for images on content pages is 200x200, which defines the maximum width and maximum height of images to be displayed.
Big Medium always carves out the maximum width for these images, no matter what the actual width of the image may be. So, for the default size of 200x200, the width of the slot where images are placed is always 200 pixels. If the image is less than 200 pixels wide (if the image is small, or if it has a vertical orientation), then there will be extra horizontal space, and captions could extend beyond the width of the image.
Admittedly, this is not ideal. One thing that you can do to make it to look better is to add a border and/or background-style to the image/caption box in the theme style. This helps contain the image and caption into a uniform box that makes the extra white space and caption misalignment less glaring.
To add a border and background image, add the following to your site’s theme style sheet (“Layout>Edit Theme Style Sheet”):
div.bmc_rightContentImage,
div.bmc_leftContentImage {
border:1px solid #ccc;
background-color:#eee;
}
You might also center the caption to make it look less off-kilter:
div.bmc_caption {
text-align:center;
}
Finally, you can also change the image size that Big Medium uses in your pages (including adding your own custom image size). For details, see the “Image Management” chapter of the Big Medium 2 Guide.