Home
Blogger

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 {
  max-width:100%;
  height:auto;
}

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. 

12 comments

  1. 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.
  2. 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
  3. 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.
    http://lupomare.com
  4. 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.

      http://1.bp.blogspot.com/-bAloSyf13e4/VpR6FT5XfxI/AAAAAAAANzQ/71nfOCikMfA/s1600/x-large%2Bimage.png

      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-

      http://www.bloggerspice.com/search/label/Blogger%20Template?&max-results=6

      I hope this tips will help you for make your Blog image responsive. Thank you
      ;)
  5. Thank you! :D
  6. thank you

  7. Thanks brother, it's really working. It will be very helpful if visit my site and advice me some tips to grow.
    www.twww.top10banglades
  8. nice your post
    • Thank you
Go Up