html - div の動的画像サイズ

Question

画像が欠落している場合、div の幅をパーセンテージで表示する必要があります。画像が動的に読み込まれるため、画像サイズを修正できません。すべての画像サイズはパーセンテージで示されています。では、画像がロードされていない場合、div の適切な幅を取得するにはどうすればよいでしょうか。

これがデモです。 http://jsfiddle.net/7LfMV/2/

Answer 1

- 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
}

Answer 2

http://jsfiddle.net/7LfMV/5/

を削除して div にdisplay: table-cell;追加しますheight

Answer 3

画像がない場合は、min-heightでmin-widthを設定します。heightwidth

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/