How to Make Blog Post Images Responsive : Automatically Resize Blogger Images

How to Make Blog Post Images Responsive : Automatically Resize Blogger Images

  April 30, 2018    PARTHASARATHI PANDA

---

How to Make Blog Post Images Responsive? that means how you can Automatically Resize Blogger Images to fit on various screen resolution. As you know you can fix the size of an image in your blog when you insert an image in to your blog, it can be small, medium, large, X-large and original size and this is best for desktop and laptop or any other device having minimum 900px resolution, but when you browse the site on the smart phone or tablet etc. the image is not resize to fit the screen and the image overflow to left or right, which may cause a bad user interface. So here we will show you how you can automatically resize all the images in your blog to fit with various screen resolution, which called responsive image.

How to Make Blog Post Images Responsive : Automatically Resize Blogger Images HTML/CSS Code

How To Convert Blogspot Images to Responsive Size?

You can do it by adding a simple CSS code in your blogger template. the below are some example of CSS code to make responsive image for your blog. Edit HTML and find CSS coding section and put these codes. Please do backup the template and then edit the HTML of your blog, if any error occurs you can easily restore the blog with the downloaded template .xml file.

Steps:

• Log in to your Blogger and choose your blog you want to edit HTML.
• Now click on Theme and click on Edit HTML.
• Now press Ctrl+F to open search box and type CSS and hit enter key.
• Stop where you find .CSS (See the above image for reference)
• or you can also search for <b:skin><![CDATA[/*
• Now you can add the below CSS codes their as per your requirements.

To Resize All Images:

img {
    width: 100%; height: auto
}

( It will resize all the images in the blog including profile image and button images etc. so it's not suitable for all blogger templates)

To Fix Maximum Size of All Images:

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

(It will resize all the images in your blog up to the maximum size of the container, that means it will not exceed the post body margin) 

Responsive Images CSS Code of Post Body Blogger:

Resize all images to 100% width of the blog post body container:


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

(It will resize all images to 100% width and auto height with ratio, but one demerit you face after implementing the CSS code, which is if the image size is small it will resized to 100% and the image became unclear)

Resize all Post Body img (Recommended)

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

(This is the best CSS code and you can use it in your blog to make the blog post images responsive, the CSS code has a condition that max-width can not be exceed 100%, when insert an set it to Original Size and now view the blog post and you will see the difference)

In this way you can make blog post images responsive or to fit automatically with any screen resolution, so use the CSS code to make blog image responsive and enjoy.