I was able to finally get something reasonable. The code you can drop into your game is this:
<object name="PaneCssHolder">
<css type="string">
<![CDATA[
<style>
div#gamePanel img {
max-width: 100%;
max-height: 100%;
}
#newGamePanel {
position: fixed;
top: 32px;
height: 300px;
width: 700px;
}
</style>
]]>
</css>
</object>
<function name="InitUserInterface">
JS.eval("$('#gameBorder').append($('<div>', {id: 'newGamePanel'}))")
JS.eval("$('#newGamePanel').append($('#gamePanel'))")
JS.eval("$('#newGamePanel').append($('#gridPanel'))")
JS.eval("$('#gridCanvas')[0].width=340")
JS.eval("paper.view.viewSize.width = 340;")
JS.eval("$('div#gamePanel img').css('max-height', '100%')")
JS.eval("$('div#gamePanel img').css('max-height', '100%')")
JS.eval("$('div#gamePanel').css('margin-left', 'auto')")
JS.eval("$('div#gamePanel').css('left', '0px')")
JS.eval("$('div#gamePanel').css('top', '0px')")
JS.eval("$('div#gamePanel').css('width', '340px')")
JS.eval("$('div#gamePanel').css('height', '300px')")
JS.eval("$('div#gamePanel').css('position', 'absolute')")
JS.eval("$('div#gridPanel').css('margin-left', 'auto')")
JS.eval("$('div#gridPanel').css('top', '0px')")
JS.eval("$('div#gridPanel').css('right', '0px')")
JS.eval("$('div#gridPanel').css('width', '303px')")
JS.eval("$('div#gridPanel').css('height', '300px')")
JS.eval("$('div#gridPanel').css('position', 'absolute')")
OutputTextNoBr(PaneCssHolder.css)
</function>
I've also attached a sample game (without the image).
Let me know if you have any issues.