@GirlCalledBlu
I'm glad you like it. I wanted to do it at the bottom-right of the image, but it wouldn't work reliably. It took forever to get it to line up, and it uses/requires two pieces of code.
First is a div which defines the position; in this instance,
<div style="left: 90%; top: 10px; position: absolute">[[File:House {{{house| }}}.png|130px]]</div>
And the other is a neat little bit of CSS code on the template, which forces images to resize to the container, based on the screen's information. It has prevented a LOT of overflow/overlap issues on the infoboxes.
{{#css:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
}}
That last bit goes at the top of the template, it populates to any page using the template, and forces the automatic resizing. It works well, I tested it on my big laptop screen and my smaller tablet screen and it worked nicely.