If you are working on a responsive design for your Blogger blog, or you are just tired of resizing your images in post editor to fit in the post container then this tutorial will show you an easy way to make images fit with it's surrounding.
This problem occurs often when you try to post images of the dimension larger than your content area or you are just using a responsive layout and when it down-sizes, the images overflows the content area.
Before you continue with the tutorial, check the demo:
Demo: Without the CSS Demo: With the CSS
In the first demo, the image in the container overflows because the width of the image is larger than that of the image, but in the second demo, if the image width is greater than the container's, it will fit itself to the container.
The Code!
All this can be achieved with a small block of CSS code. Before I start giving you lectures on how this works, here's the code for you to use (can be used in most Blogger Templates, but you might need to change the selectors if you are using a custom designed template):
.post-body img {
max-width:100%;
max-height:auto;
}
Now you just need to apply this code to your blog, check this tutorial to learn how add CSS in Blogger.
How does it work?
If you are not a web designer or coder, then this might all seem like a magical charm to you, but it's just code, code that's made to make your life easier. Well, so if you are ready to get bored then I am starting my chapter on CSS.
What actually does the magic is the max-width CSS property which gives any element a maximum width limit. So if you specify an element the the maximum width of 200px, it wouldn't exceed it. The 100% value tells the browser that the element(s) must not exceed the full content width of the container.
The max-height property helps in keeping the original proportion of the image intact. To know more about what would happen if you specify a value in percentage then try and check the results ;)
This problem occurs often when you try to post images of the dimension larger than your content area or you are just using a responsive layout and when it down-sizes, the images overflows the content area.
Before you continue with the tutorial, check the demo:
Demo: Without the CSS Demo: With the CSS
In the first demo, the image in the container overflows because the width of the image is larger than that of the image, but in the second demo, if the image width is greater than the container's, it will fit itself to the container.
The Code!
All this can be achieved with a small block of CSS code. Before I start giving you lectures on how this works, here's the code for you to use (can be used in most Blogger Templates, but you might need to change the selectors if you are using a custom designed template):
.post-body img {
max-width:100%;
max-height:auto;
}
Now you just need to apply this code to your blog, check this tutorial to learn how add CSS in Blogger.
How does it work?
If you are not a web designer or coder, then this might all seem like a magical charm to you, but it's just code, code that's made to make your life easier. Well, so if you are ready to get bored then I am starting my chapter on CSS.
What actually does the magic is the max-width CSS property which gives any element a maximum width limit. So if you specify an element the the maximum width of 200px, it wouldn't exceed it. The 100% value tells the browser that the element(s) must not exceed the full content width of the container.
The max-height property helps in keeping the original proportion of the image intact. To know more about what would happen if you specify a value in percentage then try and check the results ;)
