How to make your Blog Post Image Responsive?

Learn how to make your Blog Post Image Responsive easily? Just by a simple piece of CSS code make post image responsive.

make post image responsive

Blogger latest trend is using responsive template thus it can be fit in any device. But if there are many blog user still using non-responsive template. As a result if non-responsive template open in Smartphone or tablet then images will display larger and some image will go out of the Blog post Body. To solve this issue we should make our Blog post image responsive. Thus image can be resized according to the device resolution. By the help of CSS we can easily make our all Blog image responsive.

In this code I have define the width 100% that means if your Blog post body width is 500px or 700px then image will be same width according to your post body width. And height is always auto, as a result this code will help you to change the image width only not height. And actual height will be display in Blog post. You can see the Demo from below image. 

animated responsive page

Just follow the below steps to make all Blog post image responsive.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML->

Step 3
 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy and Paste below code above/before </b:skin>

.post-body img {

Step 5 Now hit the Save template button.

Now check your Blog post in any device and see your all images resizing according to device size. I hope this tutorial will help you to make your Blog post image responsive. Thank you. 
How to make your Blog Post Image Responsive?
4 Stars stars - "How to make your Blog Post Image Responsive?" Blogger latest trend is using responsive template thus it can be fit in any device. But if t...

Post a Comment

স্যার , সালাম নিবেন । আশা করি ভালো আছেন ।
ব্লগ পোস্ট এর Read More এর আগে যত ওয়ার্ড থাকে বা কারো ব্লগে Read More না থাকলেও যত ওয়ার্ড থাকে টা পরিবর্তন করবো কিভাবে ?

nice post onek tanx share korar jono ...

Thanks Aslam but mejas ta onek kharap..non-stop copy paste kortace. 1/2 hour kosto kore lekhi tar por 2 minutes er modhdhe copy martace.

I'm not quite sure how to say this; you made it extremely easy for me! Thanks, Find Outdoor Games information. Essential Kayaking Equipment

Thanks for dropping your comment..:clap

Excellent post. Keep posting such kind of information on your blog.Im really impressed by it. Hi there, You have done a fantastic job. I'll definitely digg it and for my part recommend to my friends. I am confident they'll be benefited from this website.

Hi Mohamed! I can't find why this code works only sometimes... I tried to delete it and rewrite it in the CSS or above but nothing... And sometimes it works perfectly! I'm starting to tkink that my blog has some problem :t

Hi Jess. I have understood your concern. But unfortunately this is the only way to make Blogger image responsive. Because all Blogger images are hosted on picasa's Server and we do not have the rights to access it.

What you can do? I have given a simple trick that wherever you upload a image then click on image and select Large or x-large size instead of Original size.

If you have already publish your Blog post with original size then you must change your all image size manually.

In addition, you can follow a image format like me. Recently I am using my Blog's main image 700px width X 400px Height. Because my Blog post width is 755px.

And you must use a responsive Blogger template.. you can find some responsive template from below link-

I hope this tips will help you for make your Blog image responsive. Thank you

Thank you! :D

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *