How to resize images in posts and comments

D:\wautom\wp-content\themes\mesocolumn

There are 3 image displays in WordPress:
– the image displayed in the main page
– the image displayed in the POST
– the image displayed in the Comments.

NOTE:
The images in the Comments are displayed smaller, as 600px, because the right side bar takes some spaces.
The images in the Main Page and first POST are displayed bigger, as 640px.

NOTE:
The Main Page and POST images are decided by this CSS part:

.entry-content img {
max-width: 640px;
width: 640px;
height: auto;
border:5px solid #021a40;
}

The Category post list images display is decided by this CSS part:

.entry-summary img {
max-width: 640px;
width: 640px;
height: auto;
border:5px solid #021a40;
}

Here by this example usage, you see the power of CSS style.

WordPress Dashboard

Apperance – Editor
CSS style: style.css

Added the following code for all img tags:

/* Added by ME: 2012.12.03 */

.comment-body img {
max-width: 600px;
width: expression(this.width > 600 ? 600: true);
height: auto;
}

.entry-content img {
max-width: 640px;
width: 640px;
height: auto;
}

.entry-summary img {
max-width: 640px;
width: 640px;
height: auto;
}

After adding above code in styles.css, then in comments:
1. images larger than 600px will be resized to 600px;
2. images smaller than 600px, stay the same size;
3. it works for:
<-img src=”…image.jpg “->
4. it works for:
<-img src=”…image.jpg ” width=”800″ -/>
— 900px will be overwritten by 600px
5. it works for:
[img] .. [/img]
6. .entry-content is the class of the POST (not the comment)

What does above CSS code mean?
It means:
For all img tags inside the comment-body class, apply this css style.
How do you know it is about all images inside the comment-body class?
For example: THIS post, view the source html of THIS PAGE, you will see that the comment is inside this <-DIV> .. <-/DIV> block:

<-div class=”comment-body“>

<–img src=” http://img3.cache.netease.com/photo/0008/2012-11-24/8H1KHM682DH00008.jpg” />
..
<-/div>

SO: I create this one:
.comment-body img {
max-width: 600px;
width: expression(this.width > 600 ? 600: true);
height: auto;
}

THIS IS A POST ABOUT Image Resize, see the discussions:
http://remaginedreality.blogspot.nl/2008/02/auto-resize-posted-images-in-wordpress.html

.storycontent img {
max-width: 460px;
width: expression(this.width > 460 ? 460: true);
height: auto;
}

.storycontent: The story content class. Change accordingly.
img: For images found inside the .storycontent posted story
460px: Change this accordingly (or lesser probably) to the width size of your story content box.
width: expression(this.width > 460 ? 460: true); max-width fix for IE. Change the 460 to the appropriate size.