Auto Shrink Posted Images to Maximum Theme Width

If you are using wordpress blogs, then you are familiar with the default theme which is a theme full of features, though its not liked by many because of the looks. In the Default Wordpress theme whenever you upload any images of any width , they are automatically resized to the theme’s maximum width, not breaking the whole blog and the sidebars. This kind of feature is really required when you are adding multiple images and are looking for perfect looking blog.

When you use other available wordpress themes, then there are chances that you will get problems with the images section because the themes are broken when the size of image exceeds the current theme’s content section width. Any solution for this using wordpress plugins? No there is no real quick solution for this because most wordpress themes are simply coded and the theme developers dont add code for automatically resizing the images added in the content section. The plugins available on the web only work for images which are hosted in your server and do not support for the images which are hosted somewhere.

Solution for Automatically Resizing Images :
You need to access your style.css file located in the themes folder and add the following code –

.post img {
max-width: 530px;
width: expression(this.width > 530 ? 530: true);
}

Generally in your stylesheet the content part is denoted by .post but depending on the theme it can be .post, .content, .center etc and you need to trace the same and add the above code somewhere in your file. Once saved, it starts working and resizes all the images to the given width/size dimensions.

Image Auto Resize Properties

One of my image posted in this blog was of the size – 603px × 136px but it got Automatically scaled to 530px × 120px , which means that it resizes the images to the given width and height respectively. You need to find the maximum width of the content part of your blog and save the dimensions in the above given code.

We will send you useful technology related Tips. Enter your email address :

About Amit Bhawani

My name is Amit Bhawani and I am the chief blogger at Amit Bhawani Blog and where I like to share my internet/tech experience with my online readers on this website. You can read more about me at my About Page. You can follow me on Twitter, Facebook & Google +1 at +Amit Bhawani

Comments

  1. Thanks.
    Thats a great tweak.

  2. Hello Amit.
    I wanted the image to be small so I changed 530 to 450.
    But now my image shrinks in width only,height remains same.
    I want the image to preserve ratio.
    Here is my problem
    http://i44.tinypic.com/24neat0.jpg

  3. Amit Bhawani says:

    Hey generally , it would resize both the sides mainly based on the width of the images. What is the location where you had installed this?

  4. There are three .css files
    style.css,style_ie6.css and style_ie.css
    I have added the code in .css at the end.

  5. thnx fr d info..
    u motivate young bloggers with such articles..

  6. Babaji M P says:

    Original image size was 600 x 800

    I changed to a new theme which has a content width of 450px
    Implemented the above max width solution,

    But the image result was 450 x 800,
    Instead of 450 x 600 px.

    Any suggestions ?

    • The code will automatically resize based on the size you set in the css stylesheet file. There are three locations where the the size should be set which is to be adjusted at 450px which is your requirement.

Speak Your Mind

*

More in Wordpress Guide (44 of 68 articles)