[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-width
s with width
.