MyBB Community Forums

Full Version: Using CSS to define max height and width of image in showthread.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
There is an awesome plugin by G33K called - Fit on page . You can use it if you don't want complicated methods (although this one is hell easy)
note: G33K's plugin resizes images only when fully loaded. This method does resize even when image isn't fully loaded Wink

_______________________________________________________

1. Go to tempaltes & style and edit your theme
2. edit Showthread.css >> Edit Stylesheet: Advanced Mode
3. add the following code to the top and save

.mainimage {
  max-width: 500px;
  max-height: 500px;
  width: expression(this.width > 500 ? "500px" : true);
  height: expression(this.height > 500 ? "500px" : true);
}
Screebshot of stylesheet: http://tinypic.com/r/34i2qso/7

note: change max-width and max-height's value at both places to suit your needs

4. Now go configuration >> mycode >> add new mycode
and fill the following data -

Title : image
Regular Expression :
\[img\](.*?)\[/img\]
replacement :
<a href="$1"><img class="mainimage" src="$1"></img></a>
Parse order : 1

Save mycode

That was all! any image larger than defined sized will be resized and shown in smaller dimensions
Quote:Important Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons, as detailed in the IE blog entry titled Ending Expressions. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode. (For more information about document compatibility modes, see Defining Document Compatibility.) Because Internet Explorer 8 in IE8 mode is fully compliant with the Cascading Style Sheets (CSS), Level 2 Revision 1 (CSS2.1) standard, most dynamic properties written to work around CSS-related shortcomings in previous versions of Internet Explorer should no longer be needed. Other dynamic properties with more specific uses can generally be replaced with standard JavaScript.

http://msdn.microsoft.com/en-us/library/...s.85).aspx
But here it says that max-width is supported by IE9

http://www.w3schools.com/cssref/pr_dim_max-width.asp
max-width is supported

expression() is not
Then this CSS should work on most browsers Smile