I am just wondering what in the HTML is making certain pictures distorted and how/if I can change that in any way. Certain photos whose height is above a certain px get distorted and it's frustrating.
Here is my Tumblr: http://buriedlies.tumblr.com/
You can clearly see the photos that become distorted.
Here is the code: http://pastebin.com/6L8DFByX
Also, how do you do that shadow/glow effect? If it's not too much trouble to ask.
[original answer completely replaced]
My fix is in three parts.
First you need to search and replace every instance of #entry with .entry.
Second you replace <div id="entry"> with <div class="entry" style="overflow:hidden;">
Finally replace your whole {block:Photos} with
{block:Photo}
{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:500px; display:block; margin:auto;"/>{/block:PermalinkPage}
{block:IndexPage}
<div class="perma">
<a href="{permalink}">{NoteCountWithLabel}</a> ∞
<a href="{ReblogURL}" target="_blank">reblog</font></a></span></div>
<a href="{permalink}">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:300px; display:block; margin:auto;"/></a>
{/block:IndexPage}
{LinkCloseTag}
{/block:Photo}
{block:Photoset}
{block:PermalinkPage}{LinkOpenTag}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}
<div class="perma">
<a href="{permalink}">{NoteCountWithLabel}</a> ∞
<a href="{ReblogURL}" target="_blank">reblog</font></a></span></div>
{block:Photos}
<a href="{permalink}"><img src="{PhotoURL-500}" style="max-width:300px; display:block; margin:auto;"/></a>
{/block:Photos}
{/block:IndexPage}
{LinkCloseTag}
{/block:Photoset}
My code will now also display something for photosets (which the original version couldn't handle at all). I did not try to center images whose height is more/less than the post height because that is a MESS to do in CSS. My code will also prevent images from being blown higher than their normal size. if you don't care about that, just replace all max-widths with width.
