Why post image responsive is important for blogger?
Blogger's latest trend is to use responsive templates that can fit any device. However, many blog users are still using non-responsive templates. This way, the images can be resized according to the device resolution. With the help of CSS, we can easily make all our blog images responsive.
In this code, I have defined the image width as 100% of the post body width. The height is set to auto, so the code only changes the width. The actual height will be displayed in the blog post. See the demo image below.
To make all blog post images responsive, simply follow the steps outlined below.
- Log in to your Blogger Account and go to the Dashboard.
- Click on Template and select Edit HTML.
- Use Ctrl+F (Windows) or CMD+F (Mac) to find </b:skin>.
Copy and paste the code below it.
.post-body img { max-width:100%; height:auto; }
Now click on the Save template button.
Now you can check your blog post on any device and see all of your images resize according to the device size. Hopefully, this tutorial will help you make your blog post images responsive. Thank you.
0 Comments