Site in read-only mode

This site is now read-only following the release of MyBB 1.8 and the new mods site.

If you are looking for MyBB 1.8 mods please click here to visit the new mods site.

You can continue to download submissions for MyBB 1.6 and earlier here, however new submissions will only be accepted via the new mods site.

Rating

  • Rated /5 with 1 votes
  • 1
  • 2
  • 3
  • 4
  • 5

Using CSS to resize large images (define max width and height)

A way to set max width and height of a image using CSS (without any plugins) using mycode and some stylesheet editing


There is an awesome plugin by G33K called - Fit on page

But below is a way to set max width and height of a image using CSS (without any plugins).

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

PHP Code:
.mainimage {
  max-width: 500px;
  max-height: 500px;
  width: expression(this.width > 500 ? "500px" : true);
  height: expression(this.height > 500 ? "500px" : true);
} 


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 :

PHP Code:
\[img\](.*?)\[/img\] 

replacement :

PHP Code:
<img class="mainimage" src="$1"></img> 

Parse order : 1

Save mycode

That was all! any image larger than defined sized will be resized and shown in smaller dimensions