H.Aziz Kayıhan H.Aziz Kayıhan - 6 months ago 41
CSS Question

Remove auto-resize in blogger

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:

<a href="##" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><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;" /></a>


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:

<a href="##" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="##" height="240" width="320" /></a>


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
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.