I've changed my theme now so it doesn't matter anymore....


Hi,

With the theme I have now if I post a photo larger than 300px in the caption area of a post then it is cut off. How can I change it my html so it resizes the photo (keeping the proportions) so it fits.

My tumblr is http://imaginebeyondbelief.tumblr.com/
and my theme code is


<html lang="en">
<head>

<!--
Theme by h4te
http://h4te.tumblr.com
Please don't remove the credit.
-->


<title>{title}</title>


<meta name="color:Background" content="#d3d2d5"/>
<meta name="color:Text" content="#000"/>
<meta name="color:Title" content="#000"/>
<meta name="color:Box" content="#fff"/>
<meta name="color:Link" content="#000"/>
<meta name="color:Hover" content="#000"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content=""/>
<meta name="if:Show Photo" content="0"/>
<meta name="if:Show Title" content="1"/>
<meta name="if:Show Note Count" content="1"/>
<meta name="if:Show Captions" content="1"/>
<meta name="if:Show Notes" content="1"/>
<meta name="font:Title" content="Helvetica"/>
<meta name="font:Blog Title" content="courier new"/>
<meta name="font:Body" content="Helvetica"/>
<meta name="text:Title font size" content="14px"/>
<meta name="if:Endless Scroll" content="1"/>
<meta name="if:Tiny Cursor" content="0"/>
<meta name="if:Rainbow Links" content="0"/>
<meta name="if:Shadow Links" content="0"/>
<meta name="if:Sidebar Shadow" content="1"/>
<meta name="if:Sidebar Rounded" content="0"/>
<meta name="if:Notes On Homepage" content="1"/>
<meta name="if:Posts Shadow" content="1"/>
<meta name="if:Dotted Border Sidebar" content="0"/>
<meta name="if:Solid Border Sidebar" content="0"/>
<meta name="if:Dotted Border Posts" content="0"/>
<meta name="if:Solid Border Posts" content="0"/>
<meta name="if:Ask Link" content="1"/>
<meta name="if:Archive Link" content="1"/>
<meta name="text:Link One" content="" />
<meta name="text:Link One Title" content="" />
<meta name="text:Link Two" content="" />
<meta name="text:Link Two Title" content="" />
<meta name="text:Link Three" content="" />
<meta name="text:Link Three Title" content="" />
<meta name="text:Link Four" content="" />
<meta name="text:link Four Title" content="" />
<meta name="text:link Five" content="" />
<meta name="text:link Five Title" content="" />


{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js"></script>

{block:ifendlessscroll}<script type="text/javascript" src="http://static.tumblr.com/ubmlcww/vRrls53pk/scroll_to_top.txt"></script>{/block:ifendlessscroll}


<style type="text/css">

{block:iftinycursor}
body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;}
{/block:iftinycursor}

{block:ifrainbowlinks}<script type='text/javascript'>

//<![CDATA[

var rate = 50;

if (document.getElementById)

window.onerror=new Function("return true")

var objActive; // The object which event occured in

var act = 0; // Flag during the action

var elmH = 0; // Hue

var elmS = 128; // Saturation

var elmV = 255; // Value

var clrOrg; // A color before the change

var TimerID; // Timer ID

if (document.all) {

document.onmouseover = doRainbowAnchor;

document.onmouseout = stopRainbowAnchor;

}

else if (document.getElementById) {

document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

document.onmouseover = Mozilla_doRainbowAnchor;

document.onmouseout = Mozilla_stopRainbowAnchor;

}

function doRainbow(obj)

{

if (act == 0) {

act = 1;

if (obj)

objActive = obj;

else

objActive = event.srcElement;

clrOrg = objActive.style.color;

TimerID = setInterval("ChangeColor()",100);

}

}



function stopRainbow()

{

if (act) {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

}



function doRainbowAnchor()

{

if (act == 0) {

var obj = event.srcElement;

while (obj.tagName != 'A' && obj.tagName != 'BODY') {

obj = obj.parentElement;

if (obj.tagName == 'A' || obj.tagName == 'BODY')

break;

}

if (obj.tagName == 'A' && obj.href != '') {

objActive = obj;

act = 1;

clrOrg = objActive.style.color;

TimerID = setInterval("ChangeColor()",100);

}

}

}



function stopRainbowAnchor()

{

if (act) {

if (objActive.tagName == 'A') {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

}

}



function Mozilla_doRainbowAnchor(e)

{

if (act == 0) {

obj = e.target;

while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {

obj = obj.parentNode;

if (obj.nodeName == 'A' || obj.nodeName == 'BODY')

break;

}

if (obj.nodeName == 'A' && obj.href != '') {

objActive = obj;

act = 1;

clrOrg = obj.style.color;

TimerID = setInterval("ChangeColor()",100);

}

}

}



function Mozilla_stopRainbowAnchor(e)

{

if (act) {

if (objActive.nodeName == 'A') {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

}

}



function ChangeColor()

{

objActive.style.color = makeColor();

}



function makeColor()

{

// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB

if (elmS == 0) {

elmR = elmV; elmG = elmV; elmB = elmV;

}

else {

t1 = elmV;

t2 = (255 - elmS) * elmV / 255;

t3 = elmH % 60;

t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {

elmR = t1; elmB = t2; elmG = t2 + t3;

}

else if (elmH < 120) {

elmG = t1; elmB = t2; elmR = t1 - t3;

}

else if (elmH < 180) {

elmG = t1; elmR = t2; elmB = t2 + t3;

}

else if (elmH < 240) {

elmB = t1; elmR = t2; elmG = t1 - t3;

}

else if (elmH < 300) {

elmB = t1; elmG = t2; elmR = t2 + t3;

}

else if (elmH < 360) {

elmR = t1; elmG = t2; elmB = t1 - t3;

}

else {

elmR = 0; elmG = 0; elmB = 0;

}

}

elmR = Math.floor(elmR).toString(16);

elmG = Math.floor(elmG).toString(16);

elmB = Math.floor(elmB).toString(16);

if (elmR.length == 1) elmR = "0" + elmR;

if (elmG.length == 1) elmG = "0" + elmG;

if (elmB.length == 1) elmB = "0" + elmB

elmH = elmH + rate;

if (elmH >= 360)

elmH = 0;

return '#' + elmR + elmG + elmB;

}

//]]>

</script>{/block:ifrainbowlinks}

body{
margin:0px;
background-color: {color:Background};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
font-size: 10px;
line-height:7px;
font-family:{font:Body};
color:{color:Text};
margin-top: 1%;
margin-left: ;
}

a:link, a:active, a:visited
{ color: {color:Link};
text-decoration: none;
-webkit-transition:
color .0s ease-out;
-moz-transition: color 0.2s ease-out;
transition: color .0s ease-out;}

a:hover{
color:{color:Hover};
text-decoration: none;
}

#base{width:300px; height:auto;}
{block:PermalinkPage}
width:300px;
margin: 0px 0px 0px 22%;
{/block:PermalinkPage}
}

#picture{
padding-top:3px;
padding-bottom:3px;
position:fixed !important;
width:246px;
height:207px;
background-color:{color:box};
<div id="post-{PostID}" class="post {PostType} {block:Photoset}photoset{/block:Photoset} {block:IndexPage}{block:Photo}{block:Post7}{block:ifLarger7thPhoto}wide{/block:ifLarger7thPhoto}{/block:Post7}{block:Post14}{block:ifLarger14thPhoto}wide{/block:ifLarger14thPhoto}{/block:Post14}{/block:Photo}{block:Video}wide{/block:Video}{/block:IndexPage} {block:PermalinkPage}widest{/block:PermalinkPage}">
left:4%;
margin-top:0px;
padding-left:3px;
padding-right:3px;
padding-bottom:2px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#side{
margin-top:200px;
padding:4px;
line-height:auto;
{block:ifnotinfinitescroll}padding-bottom: 8px;{block:ifnotinfinitescroll}
position:fixed !important;
width:200px;
margin-left: 30px;
{block:ifsidebarshadow}box-shadow: 0px 5px 15px rgba(0,0,0,0.6);{/block:ifsidebarshadow}
{block:ifsidebarrounded}-moz-border-radius: 5px;
border-radius: 5px;{/block:ifsidebarrounded}
background-color:{color:box};
{block:ifsolidbordersidebar}border: 1px solid black;{/block:ifsolidbordersidebar}
{block:ifdottedbordersidebar}border: 1px dotted black;{/block:ifdottedbordersidebar}
}

iframe {
position: fixed
top: yy%;
left: xx%;
}

#center{
margin:auto;
position:relative;
width:1180px;
overflow:auto;
overflow-y:hidden;
}

#posts{
float:right;
width:700px;
margin-left:;}

#entry{
z-index:1000;
margin-left:-200px;
float: left;
width: 300px;
height: auto;
line-height:8px;
background-color:{color:box};
padding:0px;
margin-right:8px;
overflow:hidden;
margin-bottom:10px;
{block:ifpostsshadow}-moz-box-shadow: 5px 5px 6px rgba(0,0,0,0.6);
-webkit-box-shadow: 5px 5px 6px rgba(0,0,0,0.6);
box-shadow: 5px 5px 6px rgba(0,0,0,0.6);{/block:ifpostsshadow}
{block:ifsolidborderposts}border: 1px solid black;{/block:ifsolidborderposts}
{block:ifdottedborderposts}border: 1px dotted black;{/block:ifdottedborderposts}
}

#entry .perma a{
color: {color:Links} }

#entry .perma{
width:300px;
position: absolute;
font-family: cambria;
font-size: 10px;
line-height: 15px;
text-align: center;
overflow:hidden;
opacity: 0.0;
background-color:#fff;
}

{block:ifnotesonhomepage}#entry:hover .perma{
overflow:visible;
-webkit-transition: opacity 0.2s linear; opacity: 0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}{/block:ifnotesonhomepage}


#pagination{
font-size: 10px;}

#permapage{
padding-top:7px;
font-family: century gothic;
font-size: 11px;
line-height: 11px;
text-align: center;
padding-bottom:5px;
z-index:100;}

#notes{
{block:permalinkpage}
background-color: {color:box};
display:block;
width:300px;
list-style:none;
float: left;
padding:2px;
overflow:hidden;
z-index:1;
margin-top: -5px;
text-align: left;{/block:permalinkpage}
}

ol.notes img.avatar { display: true; padding:2px 0 0 2px; border:0px;}

.title{
font-family: {font:Title};
font-size: {text:Title font size};
line-height: {text:Title font size};
color: {color:Title};
font-weight: normal;
}

.blogtitle{
{block:ifnotshowphoto}padding-bottom: 10px;{/block:ifnotshowphoto}
{block:ifshowphoto}padding-bottom:5px;{/block:ifshowphoto}
font-family:georgia;
text-align:center;
color: {color:title};
line-height:18px;
font-size:18px;
}

.video embed, .post div.video object {
width:300px !important;
height:auto !important;
}

blockquote{
padding:0px 0px 2px 3px;
margin:0px 0px 2px 1px;
border-left: 1px dashed {color:Text};
}

a img{border: 0px;}

ul, ol, li{list-style:none; margin:0px; padding:0px;}

.user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
.user_7 .label, .user_8 .label, .user_9 .label {color:#555;}

.notes img{width:10px; position:relative; top:3px;}

a.links {
font-family: Arial;
font-size: 10px;
line-height: 9px;
text-transform: normal;
letter-spacing:0px;
display:block;
padding: 0px;
margin-bottom: 0px;
-moz-border-radius:0px; border-radius:0px;
}
a.links:hover {
font-style: italic;
text-decoration: underline;
letter-spacing:10px;

}

.pft{font-family: Arial; font-size: 10px; text-align: center;}

</style>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=820" />
{block:ifEndlessScroll}
<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
{/block:ifEndlessSCroll}
</head>

<body>



<div id="picture">
<div id="center">
<div id="side">


<center>
{block:ifShowTitle}
<span style="position: relative; top: 1px z-index:1000;">
<div class="blogtitle"><a href="/">{Title}</a></div>
</span>
{/block:ifShowTitle}

{block:ifShowPhoto}
<div style="padding-top:0px; padding-bottom:5px;">
<div align="center">
<a href="/">
<span style="position: relative;">
<img src="{image:sidebar}" WIDTH=150 style=" opacity:0.98;filter:alpha(opacity=98)" border="0" /></span></div>
</div>
</a>
{/block:ifShowPhoto}
<center>
{description}
{block:ifLinkOneTitle}
{block:ifdescription}
{/block:ifdescription}
<a href="{text:Link One}" class="link">{text:Link One Title}</a> 
{/block:ifLinkOneTitle}
{block:ifLinkTwoTitle}
<a href="{text:Link Two}" class="link">{text:Link Two Title}</a> 
{/block:ifLinkTwoTitle}
{block:ifLinkThreeTitle}
<a href="{text:Link Three}" class="link">{text:Link Three Title}</a> 
{/block:ifLinkThreeTitle}
{block:ifLinkFourTitle}
<a href="{text:Link Four}" class="link">{text:Link Four Title}</a> 
{/block:ifLinkFourTitle}
{block:ifLinkFiveTitle}
<a href="{text:Link Five}" class="link">{text:Link Five Title}</a> 
{/block:ifLinkFiveTitle}

{block:ifnotlinkonetitle}{block:ifdescription}<BR><BR><BR><BR>{block:ifdescription}{/block:ifnotlinkonetitle}{block:ifasklink}<a href="/ask">message</a> {/block:ifasklink}

{block:ifarchivelink}<a href="/archive">archive</a> {/block:ifarchivelink}

<script src='http://static.tumblr.com/ubmlcww/aXpls2t3m/posts.txt
' type='text/javascript'></script>

</center>

{block:ifnotEndlessScroll}<center>{block:Pagination}
<BR>
{block:PreviousPage}<a href="{PreviousPage}"><font size="4"><b>←</b></font></a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}"><font size="4"><b>→</b></font></a>{/block:NextPage}
{/block:Pagination}{/block:ifnotEndlessScroll}</div>



</center>

{block:ifshadowlinks}<style type="text/css">a:hover {

color:{color:Text};

text-decoration: none;

font-style: none;

text-shadow:0px 0px 5px #02305A;}</style>{/block:ifshadowlinks}

<div id="pagination">
<div align="center">
<div id="posts">

{block:Posts}
<div id="entry">

{block:IndexPage}
<div class="perma">
<a href="{permalink}">{NoteCountWithLabel}</a> /  <a href="{ReblogURL}" target="_blank">reblog</a></span></div>
{/block:IndexPage}

{block:Photo}
{block:IndexPage}
<div id="base">
<a href="{permalink}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width=300px / border="0"></div>
</a>
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}<center><img src="{PhotoURL-500}" alt="{PhotoAlt}"width=300px/ border="0"></center>
{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{Block:ifPosthover}<a href="{ReblogUrl}"><Span class="permalinkdate"></span></a>{/Block:ifPosthover}<a href="{permalink}">
{Photoset-250}</a>

{/block:Photoset}

{block:Text}
{block:indexpage}
<span class="permalinktext"><a href="{permalink}"></span><div style="padding: 3px;"></div>
{/block:indexpage}
{block:Title}
<span class="title">{Title}</span>
<div style="padding: 3px;"></div>
{/block:Title}
<span class="entrytext">{Body}</span>
<a href="{Permalink}"></a>
{/block:Text}

{block:Link}<div style="padding-top:5px; padding-bottom:0px; ">
<a href="{permalink}">
<font size="3">
<a href="{URL}">{Name} </a></font></div>
{block:Description}{Description}{/block:Description}
{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}<div style="padding-top:0px; padding-bottom:3px;"><a href="{Permalink}"></div>
{/block:Link}


{block:Quote}<a href="{Permalink}">
<div style="padding:2px;"></div>
<span class="title">{Quote}</span>
{block:Source}
{Source}
<div style="padding:2px;"></div>
{/block:Source}
</a>
{/block:Quote}

{block:Chat}
<span class="permalinktext"><a href="{permalink}"></span><div style="padding:3px;"></div>
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
{block:ifShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{/block:ifShowCaptions}
<a href="{Permalink}"></a>
<div style="padding:3px;"></div>
{/block:Chat}

{block:Audio}
<span class="permalinktext">
<a href="{permalink}">
</span>
<div style="width:300px; height:8px;">
<div style="float:left">
{AudioPlayerGrey}
</div>
<div style="margin-top:8px; float:right; padding-right: 10px;">
<small>
{FormattedPlayCount} plays {block:ExternalAudio} // <a href="{ExternalAudioURL}">Download?</a>{/block:ExternalAudio}
</small>
</div>
</div>

{/block:Audio}

{block:Video}
{Video-250}
{block:ifShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{/block:ifShowCaptions}
<span class="permalink">
<div style="padding-top:0px; padding-bottom:3px;">
<a href="{Permalink}"></a></div>
</span>
{/block:Video}

{block:PermalinkPage}
<div id="permapage">

{block:ifshownotecount}{block:NoteCount}{notecountwithlabel}{/block:NoteCount}
<br>{/block:ifshownotecount}
{block:ifshowcaptions}{block:RebloggedFrom}
Reblogged from
<a href="{ReblogParentURL}">{ReblogParentName}</a>
<br>
Posted by
<a href="{ReblogRootURL}">{ReblogRootName}</a>
{/block:RebloggedFrom}{/block:ifshowcaptions}
<div align="left">

{block:ifshownotes}{block:PostNotes}
<BR>
<BR>{PostNotes}
{/block:PostNotes}{/block:ifshownotes}
</div>
</div>

</center>
</div>
{/block:PermalinkPage}
</div>


{/block:Posts}


</div>
</div>
</div>
</div>
</center>
</div>


{block:indexpage}

{block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}



<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>

<script src='http://static.tumblr.com/ubmlcww/w98ltklfg/posts.txt' type='text/javascript'></script>
<script type="text/javascript" src="http://static.tumblr.com/jnmer2r/WKhljk73d/jquery.infinitescroll.min.js"></script>

<script>
jQuery(window).load(function(){
var $wall = $('#posts');
$wall.imagesLoaded(function(){
$wall.masonry({
singleMode: true,
animate: false,
resizeable: false,
columnWidth: 315,
itemSelector: '#entry'
});
});
$wall.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '#entry',
bufferPx : 10000,
extraScrollPx: 11000,
loadingImg : '',
donetext : 'No more pages to load.'
},

function( newElements ){
$(newElements).hide();
setTimeout(function(){
$wall.masonry({ appendedContent: $(newElements) });
},2000);
setTimeout(function(){
$(newElements).fadeIn('slow');
},2100);
},1000);
});
</script>


<script>
$.fn.imagesLoaded = function(callback){
var elems = this.find('img'),
len = elems.length,
_this = this;
if ( !elems.length ) {
callback.call( this );}
elems.bind('load',function(){
if (--len <= 0){
callback.call( _this );}
}).each(function(){
// cached images don't fire load sometimes, so we reset src.
if (this.complete || this.complete === undefined){
var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/...ee6ab7b2da50e1f
// data uri bypasses webkit log warning (thx doug jones)
this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
this.src = src;}
});
return this;};
</script>



{/block:indexpage}

<!--
Theme by h4te
http://h4te.tumblr.com
Please don't remove the credit.
-->

</body>
</html>

Thanks
xx