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

はじめてJavascriptでWebページを作ると、だいたい最初につまずくところが画像を枠の真ん中、上下左右ともに中央に表示する方法。いろいろなページにいろいろな方法が書いてあるのですが、InternetExplorer6で動かなかったり、position:absoluteで任意の位置に表示できなかったり。どれも一長一短です。

そこで僕も写真を中央に表示する方法をブログに書くことに参戦。
僕の使っている秘伝の方法を書きます。


・一番簡単な方法を取りたいならば1の方法をお勧めします。
・写真を枠のサイズに拡大縮小していれて、スペースを入れずに、はみ出した部分を切り取りたいのならば2と2'の方法を組み合わせることをお勧めします。
・写真を上下または左右にスペースをいれて枠のサイズに拡大縮小してほしいのならば3と3'の方法を組み合わせることをお勧めします。

InternetExplorer6で動く、スペースを入れずに写真を枠内にぴったしと入れる方法は、僕はcssだけではできないと思っています。本当はあるのかなぁ？


1　一番簡単な写真の中央部分を切り出してそのままの倍率で表示する方法


$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat"
});

２　横長の写真の左右をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
　　縦長の写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法

ただしこの方法はInternetExplorer8以下では1の動作になります。

$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto 200px"
});

２’　横長の写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
　　縦長の写真の上下をきって、写真を拡大縮小し枠内にぴったりの大きさで表示する方法
ただしこの方法もInternetExplorer8以下では1の動作になります。

$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
'background-image': "url(0.jpg)",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "200px"
});


３　写真の上下にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は縦長の縮小する写真はだめなので3'の方法と組み合わせるとよい


$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});

$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});

$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-height': "200px",
width:"200px"
});

return 0;
}


３'　縦長写真の左右にスペースをいれて、写真を拡大縮小し枠内にぴったりの大きさで表示でInternetExplorer6でもうごく方法
この方法は横長の縮小する写真はだめ



$("#parenttag").append("<div id=\"tag1\"></div>");
$("#tag1").css({
position:"absolute",
left: "100px",
top: "100px",
width:"200px",
height: "200px",
overflow:"hidden"
});

$("tag1").append("<div id=\"tag2\"></div>");
$("#tag2").css({
position:"static",
'layout-grid-line': "200px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:"200px",
height: "200px"
});

$("tag2").append("<img id=\"tag3\" src=\"hoge.jpg\"/>");
$("#tag3"+n).css({
'vertical-align': "top",
'max-width': "200px",
heigt:"200px"
});



----------------------------