How To Resize Images to Fit Your Blog Post Area

How To Resize Images to Fit Your Blog Post Area

This Tutorial will show you how to resize any image to automatically fit the full width of your blog post area. This will enable your blog to look more sleek and professional as all images will fit your blog post area perfectly. This code will adjust your image height accordingly so that images will not lose quality and become distorted.

Before making any changes to your Blog design make sure to backup your blog first. If you aren’t sure how to do this click here to find out how.

1. Go to Temple > Edit HTML > Click Ctrl F and Type </b:skin> into the search bar.

2. Directly above ]]</b:skin>  copy and paste this code:

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;

3. Click Save Template

4. Create a new post to test your coding works and insert an image you want. Make sure to keep the image at Original Size to ensure the code works.

The new code should now resize the image from the original size to the size of your blog post area.

It’s that simple!

Instagram | Bloglovin’ | Twitter


1 Comment

  1. June 5, 2015 / 6:18 pm

    Just tried this and it works! Thanks for the tip, it was so helpful (:

Leave a Reply

Your email address will not be published. Required fields are marked *

Looking for Something?