使用宽高比缩放div

Question

我有一个带文字和图像内容的div，宽高比为16：9。现在我想在另一个具有固定宽度的div中进行预览。 当我试图这样做时，如这里所示。

http://jsfiddle.net/2800do8j/

我有两个问题：

1. 当使用CSS变换比例或字体未最小化时，显示的div（蓝色背景）太小。
2. 我不想在x-Axis上使用这个滚动条，但是如果我有一个低于另一个的div预览，我需要它在y轴上。

你能给我一些建议如何解决这个问题吗？

这是相关的CSS部分：

.bla {
    width:1132px; 
    height:637px;
    position: block;
    -ms-transform: scale(0.33,0.33); 
    -ms-transform-origin: 0 0;
    -webkit-transform: scale(0.33,0.33); 
    -webkit-transform-origin: 0 0;
    transform: scale(0.33,0.33);
    transform-origin: 0 0;
}

（顺便说一下：为什么在使用jsfiddle时必须添加代码？）