Displaying Large Images (Option 1)

classic Classic list List threaded Threaded
1 message Options
GregChapman GregChapman
Reply | Threaded
Open this post in threaded view
|

Displaying Large Images (Option 1)

This post was updated on .
Posts that include images that are wider than the window in which they are viewed generate a scrollbar at the bottom of the post. Many visitors will fail to notice the scroll bar and only see part of the left side of the image.

This post demonstrates one approach for including large images without them generating a scrollbar at the bottom of the post. It will centre any image not set to float left or right and shrink any image too wide to fit the available width. This approach is useful where it is more important to see the whole image than particular detail within the image. Note that it is always possible to encourage to visitors to use the technique described in Option 2 to display the image at its full resolution when they can scroll around the image to see the fine detail in particular areas.
NOTE: it is crucial that the file to be uploaded is no larger than 1Mb or Nabble will reject the upload.

Simply add the code below to your forum:
/* Fit Large images to width */
div.root-text img, div.message-text img  {
  display: block;
  max-width: 95%;
  margin-right: auto;
  margin-left: auto;
}
div.root-text img.smiley, div.message-text img.smiley  {
  display:inline;
}
/* End of Fit Large images to width */
The second part of the code ensures that any smileys continue to be displayed as normal and are not placed centred on a line of their own.

To enter the code go to your forum home page and paste it into the dialogue you find via:
Options > Application > Change Appearance > CSS

Greg