画像が欠落している場合、div の幅をパーセンテージで表示する必要があります。画像が動的に読み込まれるため、画像サイズを修正できません。すべての画像サイズはパーセンテージで示されています。では、画像がロードされていない場合、div の適切な幅を取得するにはどうすればよいでしょうか。
これがデモです。 http://jsfiddle.net/7LfMV/2/
画像が欠落している場合、div の幅をパーセンテージで表示する必要があります。画像が動的に読み込まれるため、画像サイズを修正できません。すべての画像サイズはパーセンテージで示されています。では、画像がロードされていない場合、div の適切な幅を取得するにはどうすればよいでしょうか。
これがデモです。 http://jsfiddle.net/7LfMV/2/
- http://jsfiddle.net/7LfMV/4/に変更table-cell
してみてくださいinline-block
.wraptocenter {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 60% /*Div should take this width*/;
background-color:#999
}
を削除して div にdisplay: table-cell;
追加しますheight
画像がない場合は、min-height
でmin-width
を設定します。height
width
display:table-cell を使用しているので、画像を div 内の中央に配置していると思いますが、これでうまくいきます。
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid red;
min-height:300px;
min.width:300px;
}
ここでフィドルhttp://jsfiddle.net/7LfMV/6/