Making blog images fit the blog post area

I'm currently using this css to make my blog images fit the exact width of my blog area and blog post text. I'm not sure if it's the best solution as i'm having some issues with the images moving to the right occasionally.

.post-body img {
width: 761px!important;
height: auto!important;
padding: 0 !important;
border: none !important;
background: none !important;
} 

Is there a better way to do this? Thanks in advance :)

Try this once. Not Sure. but worked for me

.post-body > img{
    width:100%;
    height: auto;
}

<img> tag shall have a declaration like this (responsive code)

.

.post-body img {
   max-width:100%;
   height:auto;
}



















However you have to check if there are other CSS rules that might be affecting the display of the image, both for the image itself and for it's parents. Take into account that:

1. Images uploaded via the Blogger editor will be coded within a <div class='separator'>. Check that there are no extra margins, paddings and borders for the <div> itself or in the "separator" class.
2. The post-body usually have padding rules, so if you want your image to fill the whole post-body area you will have to declare negative margins for the image.

So assuming for example that post-body have a padding of 13px in the sides, in the end you might have something like this:

.post-body img {
   max-width:100%;
   height:auto;
   margin:0 -13px;
   border:0;
   padding:0;
}

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share