Tumblr theme—pictures are distorted

tumblr

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.

Best Answer

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

Related Topic