How to Make Images Auto Resize to Fit Blog Post Area

Images might not fit with your Blog posts area, specially when you use a default Blogger Template. In this article, I will show you how to make images auto resize to fit Blog post area using CSS. Even you can learn from this tutorial, how to make your blog post images responsive for small devices like Mobile, iPad and others.

If the images you’ve uploaded in your blog are larger than your post area, then obviously they are going to poke out of bounds. It means the images will overlap its parent area.

See the image below. The Before image is overlapping the post area and the After image has been fixed using CSS is perfect —

A sample image before and after fitting Blog post area


How to Make Images Auto Resize

I will show you two methods to make your Blog post images auto resize to fit the post area — one is using CSS and the other is resizing the blog post images.

Method #1: Make Images Auto Resize using CSS

  1. First, Sign in to Blogger with your Google Account.
  2. Click the Down arrow Down Arrow Icon in the top left, then choose the blog you want to work on.
  3. In the left menu, click Template.
  4. Click Customize under Live on Blog.
  5. In the left menu, click Advanced > Add CSS.

When you will click Add CSS, the following custom CSS area will appear —

Custom CSS Area on Blogger Template Designer

Add the following CSS code into this area and click Apply to Blog in the top right corner. Reload your blog page to see the changes.

.post-body img {
  max-width: 100%;
  height: auto;
}

Now you should see the images have been resized and fitted their post areas automatically.

What to Do if the CSS Code above not Work

If the code above doesn’t work, that means the same styles already exist in your template. So to make it work, we have to override the existing styles using !important rule at the end of the values. Use the following CSS instead of the above —

.post-body img {
  max-width: 100% !important;
  height: auto !important;
}

What to Do if the images Contain Border and Padding

You probably think you are done, but not actually, there is still one problem. What if the images contain border and padding like this —

An Example Image with Padding and Border

If the images contain border + padding will expand to the right and occupy an unexpected space of the post area. But how much will expand that depends on the values (size in px) of those properties. Look at the image below —

The image expanded to the right for containing Padding and Border

You see the image above, the highlighted area, actually occupied an unexpected space and expanded to the right for containing padding and border.

Although you can control images using max-width property to fit your Blog post area, but border and padding cannot be controlled in this way. To control them instantly when the images will be Auto Resize, use the following CSS instead of all the codes above.

The complete code (recommended to use):

.post-body img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
  • max-width: The max-width property is used to set the maximum width of an element. If you use max-width:100%; for img elements, the images will expand up to their parent element and never overlap your Blog post area.
  • height: If you use height:auto; the height of the images will be resized automatically in proportion to their width.
  • box-sizing: When you add border and padding to an element, the width/height of the element will expand. Because, the value of border and padding properties is included on the outside of the element’s box. But when you use box-sizing:border-box; the border and padding values are moved inside the element’s box, cutting into the width/height of the box rather than expanding it. The same way we’ve used for our blog post images. Look at the image below to compare —
    Content without box -sizing and with box-sizing

Never use width: 100% to make images Responsive

Some people may suggest you to use width: 100% to make your Blog post images responsive. But never do this! I am telling you why.

The width property works almost same the max-width does. But there is a big difference between the two properties.

  • The width property: If you use width: 100%, both the larger and smaller images will be resized up to their post area. So a small image also will expand to fill its post area and the result, the image will be blurry.
  • The max-width property: If you use max-width property, only the bigger images will be resized and fitted their post area. But it will never force the images which are smaller than their post area to be expanded.

Please see the following image to compare between width and max-width properties —

The max-width Property does not force to expand a small image but width Property does

Note: You can also add the code directly to your Template before ]]></b:skin>. But don’t do this, if you are not familiar with Blogger template codes. Because if you miss anything can cause your template to break down.

Method #2: Resize images to fit your Blog post area

Resizing images is another method to fit your Blog post area. To resize your blog post images —

  1. In the left menu, click Posts.
  2. All posts of your Blog will appear, click the post title you want to edit or click Edit.
  3. Click on the image is showing in the Post editor.
  4. A bubble panel will appear, now you can resize and align the image.

Bubble panel on the image in Blogger post editor

I recommend you not to upload very large size images which will make your site heavy and take longer to be loaded.

Note: This method #2 is not a permanent solution. So you are recommended to use the method #1 to avoid the future problems.