Search code examples
tumblr

Resize and center Tumblr photo post


I've been trying to resize an image within a photo post to its max width but can't seem to pinpoint the code. I can't also center the images... Any tips?

Here's an example post.

Code for my current photo post:

{block:Photo}
<div class="photo">
    <div align="center"> {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt} width="600"/>{LinkCloseTag}</center>
    {block:Caption}
        <div class="caption" align="center"> {Caption}</div>
    {/block:Caption} 
    {block:More} <a href="{Permalink}" class="button" align="center">{lang:Read more}</a> {/block:More} 
</div>
{/block:Photo}

Solution

  • Try this in the css (you need to find this code block it's around line 361 in your template):

    div.post div.photo img {
        border-width: 0px;
        position: center;
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    

    This should reset the hard coded image size properties, but you will need to test it