Scale 9 Grid HTML

The image to the right is the original image. The large image was scaled using HTML and css alone. At first you might not see what was going on here, but take a closer look. The tip, and the corners, the gray part… they didn’t scale with it. It is as if just the center expanded. That is actually exactly what has happened here.

In ActionScript you can scale an image just like this using scale9grid. It is really useful when you want a custom image like this and want it to scale to content. The third image with the lines shows how this works. The image is split into 9 parts. The 4 corners never scale. The top and bottom middle only scale horizontally , and the left/right middle only scale vertically. The middle scales both ways.

So … The large image is actually, the same image repeated 9 times, all placed next to each other to achieve this effect. The corners are easy, they are just CSS background images that never scale. The rest are HTML  elements (wrapper) that are set to the correct size, and have an IMG inside (like this <p><img src=”this.jpg”></p>) that is scaled to fit. This is all done because you can not scale a background image. (Lame I know)

When you scale an IMG, it scales the entire image to fit the set dimensions, but we only want to show part of it, like just the left middle side, or just the middle portion. Because of this, we scale the IMG to be big enough so that the part we need is the correct size, then that wrapper element acts to crop it so we only see the part we need. This is done by setting the wrapper overflow to hidden.

Working demo

Anyways, as of now, this was done by hand, but I think I could make a PHP or javascript thing to automatically do this.

It is ugly but the HTML ends up looking like this: (dont copy this, the ” are all messed up)

<div id="scale9grid">

	<p class="tl"></p>
	<p class="tm">
		<img src="leftWindow.png"/>
	</p>
	<p class="tr"></p>

	<p class="ml">
		<img src="leftWindow.png" />
	</p>
	<p class="mm">
		<img src="leftWindow.png" />
	</p>
	<p class="mr">
		<img src="leftWindow.png" />
	</p>

	<p class="bl"></p>
	<p class="bm">
		<img src="leftWindow.png" />
	</p>
	<p class="br"></p>

</div>

Comments are closed.