Skip to main content

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

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.

Comments

Popular posts from this blog

New CSC Banner Download available in PSD format(December 2022)

Dear VLE, Ministry has approved new Common Branding  format for CSC Center in category wise. There are three types of designs: 1. First one is for CSCs providing general services, and which do not provide UCL or BC service. 2. Second one is for CSCs that provide both BC and UCL services. 3. Third one is for CSCs that provide BC services along with other services. All VLES are to install one of these branding boards at their CSC depending on the services provided.   3 CSC banner design download PSD file - free computer tricks Links to the Designs: Generic CSC Centre Banner:- Generic CSC Centre Banner sample Download  Generic CSC Centre Banner PSD format from the below link Generic CSC Centre Banner || Download Here BC+UCL Centre Banner:- BC+UCL Centre Banner sample Download  BC+UCL Centre Banner PSD format from the below link BC+UCL Centre Banner || Download Here BC Centre Banner:- BC Centre Banner sample Download  BC Centre Banner PSD format from t...

Moto Fastboot FRP Unlock Tool - Reset/Bypass All Moto Qualcomm FRP Lock For Free !!!

Hi all, here is another interesting tutorial about Factory Reset Protection FRP bypass. If you have Moto any model with Qualcomm CPU or Chipset then use this method of Fastboot FRP Unlocking using the Free Fastboot Boot FRP Tool for Moto Qualcomm based phones. This method is so easy and working on Android 7.0 on any Moto smartphone having Qualcomm chip-set. So please follow the below tutorial to know how to remove FRP of Moto using Fastboot Mode. Here you can also download the Moto Fastboot FRP Unlock tool for free and it's small Windows software or tool, that can do the FRP unlock of any Moto smartphone with Fastboot mode, you can also watch video tutorial on YouTube to know how to use the FRP tool, tested on Moto Qualcomm Android 7.0. Moto Fastboot FRP Unlock Tool - Bypass All Moto Qualcomm FRP Lock Tool For Free !!! How To Enable USB Debugging On Moto Locked? If you need to know how to enable USB debugging on a frp locked Moto phone, without using internet or any ...

Realme Narzo 30 Pro 5G price in India and specifications

Realme Narzo 30 Pro 5G price in India and specifications Specifications Details Display 6.5-inch FHD+ IPS LCD display with 1080 x 2400 pixel resolution, 120Hz refresh rate Processor MediaTek Dimensity 800U 5G processor RAM 6GB/8GB LPDDR4x RAM Storage 64GB/128GB UFS 2.1 internal storage, expandable up to 256GB via microSD card Rear Camera Triple-camera setup with 48MP primary sensor, 8MP ultra-wide-angle lens, and 2MP macro lens Front Camera 16MP selfie camera Battery 5000mAh battery with 30W Dart Charge support Operating System Android 10 with Realme UI Connectivity Dual-SIM 5G, 4G LTE, Wi-Fi, Bluetooth 5.1, GPS, USB Type-C Other Features Side-mounted fingerprint scanner, 3.5mm headphone jack Price (As of my knowle...