I just recently started blogging on Blogger and the template I'm using is messing up the pictures I'm posting. It's squeezing the images.

Anyone know how to fix this? Is there a way to change the code to make it look normal?

Notice on my homepage how the images are squeezed. The red fish stands out a lot, compared to the image on the post.
http://survivalcoach.blogspot.com/

My code: http://www.sendspace.com/file/rglzon

Thanks

The red fish image file's dimensions are 325x175px. The template's HTML IMG element is 320x170px, but then that in turn is overridden by javascript(?) which makes the image about 260px wide and too high. Seems the same script also adds the text.


Maybe the template can be changed so that IMG elements are wider, but then there will be less space for text. You might make the IMG elements less high instead.

On your page the red fish image is actually 320 x 172px, but set to 260 x 195px in the IMG tag. If you want the image to be 260px wide then its height should be 139px to keep its aspect ratio. You achieve that by setting the height to auto or by getting rid of the height entirely.

Ah yes, on http://survivalcoach.blogspot.com/ the image file is http://4.bp.blogspot.com/_MI-qiMYM7Bo/TUIF...red_snapper.jpg which is indeed 320x172. That image might fit better on http://survivalcoach.blogspot.com/2011/01/edible-fish.html where the IMG element uses the same dimensions, but the current image file is instead the 325x175px http://4.bp.blogspot.com/_MI-qiMYM7Bo/TUIF...red_snapper.jpg

Wouldn't it be better to make the HTML reflect the actual image size though? Something, somewhere must decide to resize the images. I take it you don't edit the raw HTML and enter those dimensions yourself, Schwarz?