html - html figure-width を、含まれる画像の幅と同じに設定します

Question

図タグ内に画像がある場合、図の幅は 100% です。図形が常に画像と同じ幅になるようにするにはどうすればよいですか? これが私の現在のコードです：

HTML:

<figure>
    <img src="http://www.google.com/images/srpr/logo3w.png" alt="" />
</figure>

CSS:

* {
    margin: 0;
    padding: 0;
}

figure {
    border: 1px solid red;
}

img {
    border: 1px solid blue;
    vertical-align: top;
}

Answer 1

このようにcssに追加display:tableしますfigure

figure 
{
    display:table;
    border: 1px solid red;
}

JSフィドルデモ

Answer 2

あなたはJSソリューションを求めていませんが、イベントはあなたの問題に対する私の解決策です。

画像読み込み時に図の幅と高さを変更

Figure が img の親であると仮定

   $(document).ready(function(){
         $("img").load(function(){

              $(this).parent().width( $(this).width());

           });   
    });

Answer 3

少しハックですが、jquery でもこれを行うことができます。

var imgWidth = $("figure img").width();
     $("figure").width(imgWidth);

これは、何らかの理由で display: table が css スタックで機能しない場合、またはその要素を別の表示タイプにする必要がある場合の修正です。