CSSで画像を中央に表示する その３

InternetExplorer6でも写真を枠にぴったしスペースをいれずに表示する方法を昨日の深夜に考えてみました。
一番外側のタグの中に横幅が3倍のタグを作って、そのなかに横幅を指定しない写真を作ればよかったんです。

タグをこんな風に３つ重ねれば、アスペクト比が33%から300%までの画像ならばどんなブラウザでも表示できます。

$(parent_tag_name).append("<div id=\tag1\"></div>");
$("#tag1").css({
    position:"absolute",
    width:"200px",
    height: "200px",
    left: "100px",
    top: "100px",
    overflow:"hidden"
});  
$("#tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
    position:"absolute",
    width:"600px",
    height: "200px",
    'margin-left': "-200px"
});  
$("#tag2").append("<div id=\"tag3\"></div>");
$("#tag3").css({
    position:"static",
    'layout-grid-line': "200px",
    display:"table-cell",
    'text-align': "center",
    'vertical-align': "middle",
    width:"600px",
    height: "200px"
});  
$("#tag3").append("<img id=\"tag4\" src=\"0.jpg\"/>");
$("#tag4").css({
    'vertical-align': "top",
    height:"200px"
});  

ソースや試験したデータはここにおいてみました。
https://drive.google.com/file/d/0B5M9qMMg3tfQVWhnNHdCZ1p6WWc/edit?usp=sharing