Remove auto-resize in blogger - css

Question

I am using a template for my blogger blog in which images are set to resize automatically to fit the whole width. Therefore no matter I align a photo to left or right or resize the photo, they will always appear as full width. There is however one insatance I can override this, if I include the photo with this code:
<img alt="" border="0" src="##" id="BLOGGER_PHOTO_ID_5428874514942438946" style="cursor: hand; cursor: pointer; float: right; height: 240px; margin: 0 0 10px 10px; width: 320px;" />
However each time I create a post I have to add this manually for each photo because blogger automatically adds this piece of code for a photo that is aligned right as well:
<img border="0" src="##" height="240" width="320" />
But above code won't do it, and it is also a problem for previous posts. I found a part in xml file of my template a part which I believe can be the part setting the sizes of the images, here it is:
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
Though I am not sure if it is really that part, and I don't know if how I can change it and that is also because I not good with xml codes.
Any ideas how I can fix that problem?
Thanks.

Answer 1

img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
The above part, which I was thinking might be the solution, was actually not. While going through the code, I checked all width values that might be corresponded to blog posts and found this part:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;width: 100%;
height: auto;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
Here, width: 100% was the part forcing all the images to appear full width. My first solution was to set it to width: auto but it didn't help. Thought specifying width or height in xml file wouldn't be necessary so I went ahead and removed the width and height, making the final code like this:
.post h1 {
padding: 0 10px;
}
.post img{max-width:100%;
margin-left: -13px;}
.entry-container {
background: #FFF;
position: relative;
margin-bottom: -10px;
color: #444;
font-size: 14px;
padding: 30px 40px 30px 40px;
line-height: 26px;
}
It all works fine now and all the images went back to original sizes they are set.
P.S. There is another code right below to this one which is exactly same but it controls the static pages, I fixed it the same way as well.

Answer 2

I was facing the same problem.
I found out the img class as suggested by #H.Aziz.
.post-image img{
max-width:100%;
height:auto;
}
But there was no width attribute at all to delete.
The way I accomplished the goal was by changing max-width:
.post-image img{
max-width:50%;
height:auto;
}
This reduced the size of image to the appropriate one. However, a new problem that arose was that the image was shifted to the left. To fix this, the final change I made:
.post-image img{
display:block;
margin-left:auto;
margin-right:auto;
max-width:50%;
height:auto;
}
A common trick to bring an image to the center of the parent div is make it into block of its own and apply the margin properties to it.