HTML Tips: How To Resize Blog Photos To The Same Size


Today I have a super quick tutorial on how to size all your blog post pictures to the same size without having to manually do it every time you post.
First, its a good idea to back up your blog template in case anything goes wrong. You can do this by going to the template section in your blogger dashboard and clicking on backup/restore which will give you the option to download your template.
To resize your photographs all you need to do is add a little coding and this can be easily done by clicking on the customise button in your template section - go to advanced - scroll down to add css and add the following code;

.post-body img {
width: 600px!important;
height: auto!important; }

The text in yellow is the blog post photo width and you can change this to your desired width if its too large for your blog. I currently use 600px images in my blog posts so you have an idea of how wide they are. As the height is set to auto, your images wont be distorted. This coding will make the images in all your blog posts the same size. I hope this was helpful and if you have any problems just let me know in the comments below.


21 comments

  1. So helpful!! Thanks for the tip!
    Please check out my blog it would mean the world to me http://littlebeautybloge.blogspot.co.uk/
    Elizabeth x

    ReplyDelete
  2. Great tip, very helpful! Thank you :)
    X

    http://lifeisbeauty1994.blogspot.ie/?m=1

    ReplyDelete
  3. This was so helpful. Thank you! Great post :-)

    Caitlin
    caitacrawford.blogspot.co.uk
    - xoxo

    ReplyDelete
  4. This is very helpful. Thanks.
    L x
    Http://workingmumy.blogspot.com

    ReplyDelete
  5. Not really the best idea doing this as its serving images that are oversized for a smaller page. you will take a hit in your seo due to serving scaled images.

    ReplyDelete
    Replies
    1. really?I'm not an seo expert but I havent heard of that before.

      Delete
    2. serving scaled images has a negative effect.

      Delete
  6. Awesome! I'm gonna try this out :)

    ReplyDelete
  7. This was super helpful and so easy! Thank you! x

    ReplyDelete
  8. This was a huge help it was my first problem with blogging haha, please check out my blog and feel free to leave any questions/advice/requests

    Thegirlsbeautyguides.blogspot.co.uk

    ReplyDelete
  9. Great help! thank you.. saving me so much time.

    Chloe // throughchloeslens.blogspot.co.uk x

    ReplyDelete
  10. Not sure why but this didn't work on my blog! Maybe you could take a look at why?
    Thanks!

    Every Day In Grace

    ReplyDelete
  11. Hi, i applied that useful tip however i would also like to use 'follow me on bloglovin button' which then adjust itself to the huuuge size i've set for photos and looks awful...do u maybe know how to prevent it? would mean a world for me if u reply :* cheers and you have a very nice tips!! :)

    ReplyDelete
  12. Such a useful post, thank you so much! Will definitely be using these in the future and hopefully my link in comment works now!

    Lauren x
    The Fashion Ramblings | UK Fashion Blog

    ReplyDelete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo