如何使用spritesheet图像（也称为tile map）来缩放绝对div和子元素

Question

我有一个png spritesheet文件，其中包含大小为32x32的图像。

我有这个css来提取图像并放在dom上：

.viewport {
  position: relative;
  height: 72px;
  width: 100px;
  background: white;
  border: solid black;
}

.tile {
    background-image: url("http://s.cdpn.io/79/sprite-steps.png"); 
    position: absolute;
    width: 50px;
    height: 72px;
}

.image1 {
  background-position: 250px 0px;
}

.image2 {
  background-position: 0px 0px;
}

<img src="http://s.cdpn.io/79/sprite-steps.png" />

<div class='viewport'>  
  <div class='tile image2' style='left:50px;'></div>
  <div class='tile image1'></div>
</div>

现在我需要缩放此viewport以填充整个页面。启用fullscren。

示例：http://jsfiddle.net/CGmCe/13048/