How to Automatically Resize Blogger Images to Fit Blog Post Area

Hello and Welcome to GetWebInfo.com. Here on this post you will learn about that How to Automatically Resize Blogger Images to Fit Blog Post Area. I recommend resizing your images before uploading them to your post. If you upload a huge image and use the code below to automatically resize it smaller, then the browser will your blog will be slower to load. I also advise choosing original size in the Blogger options as it won't compress or distort your image quality. There's further information about this in the FAQ at the end of the post. Keep the size your images in mind small image larger then it will look blurry, pix elated and stretched.

Hello and Welcome to GetWebInfo.com. Here on this post you will learn about that How to Automatically Resize Blogger Images to Fit Blog Post Area. I recommend resizing your images before uploading them to your post. If you upload a huge image and use the code below to automatically resize it smaller, then the browser will your blog will be slower to load.


Method 01: How to Automatically Resize Blogger Images Using CSS

Step 01: Go to Template> Edit HTML and find ]]></b/skin>, After finding this code add one of the following above it.

A) If you want all images to have a width of 600px then use the following Note that this may cause your images to appear stretched if they are smaller than the size set.
.post-body img { width:600px; height:auto; } 
B) If you want all images to be at leat 600px in width then use this cod. Note that this may cause your images to appear stretched if they are smaller than the size set.
.post-body img { min-width:600px; min-height:auto; }
C) If you want your images to be max 600px wide then use this code. This will resize larger images so they properly fit in the space. I recommend this way.
.post-body img { max-width:600px; max-height:auto; }
Then Change the width value shown in pink to a number that suits your blogs post area. If your post width area is set correctly you can also changed the value above to 100%. You can also join A,B and C although this usually isn't necessary. When uploading images make sure you are choosing Original Size to get the best possible quality.



Method 02: How to Automatically Resize Blogger Images Using CSS

Step 01: An alternative way is by using this script by Blogxpertise. This didn't work too well for me on some blog templates but others it worked fine. Add the following Script to Template>Edit HTML> and Above </head>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by GetWebInfo http://www.confluentforms.com
for the GetWebInfo website https://www.getwebinfo.com
any updates to this script will be posted to GetWebInfo
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
    // the dimension of your content within the columns
    var areawidth = $('#Blog1').width();
    $('.post-body').find('img').each(function(n, image){
        var image = $(image);
        var height = image.attr('height');
        var width = image.attr('width');
        var newHeight = (height/width * areawidth).toFixed(0);
        image.attr('width',areawidth).attr('height',newHeight);
        var greater = Math.max(areawidth,newHeight);
        image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});
    });
});
//]]></script>
Step 02: You may then have to add the following code to Template>Edit HTML> and Above ]]></b:skin> and alter the value in Pink to move your images back in to the post area if they are overflowing the post area.
.post-body img { margin-left: -30px;} 
Or to move it right
.post-body img { margin-left: 30px;} 
I Hope this article is really helpfull for you. If you like this article so please share it to your Social media accounts thanks.

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.