CSS擬似要素のサイズの問題

Question

:before擬似要素は、この場合は、通常のimgのように動作しない理由を教えてください：

左1はimg内側とimg年代とdivです幅と高さは100％です。右はdivと:beforeと:beforeの幅と高さも100％ですが、効果は異なります！

（私はbackground-image回避策を使用することができます知っているが、そのcontentプロパティがurl()とき:pseudoと間違って何ですか？）

フィドル：指定するときhttp://jsfiddle.net/Tp9JG/4/

Answer 1

残念ながら、あなたは画像の大きさを制御することはできませんそのコンテンツ、 通じしかし、あなたは背景として、それを使用していることができた場合：

.with_before:before{ 
    content:''; 
    background-image: url('http://i.stack.imgur.com/CAAFj.jpg'); 
    background-size: 100% 100%; 
    width: inherit; 
    height: inherit; 
    display: inline-block; 
} 

チェックこのjsFiddle

そして、あなたの質問には、私たちはスタイルがコンテンツを生成することができない理由：缶ボックススタイルではなく、コンテンツを生成したコンテンツが生成されるボックスにレンダリングされているため 我々はできない、とあなた。

参照：

1. check this post
2. another lengthy discussion on this subject

異なるブラウザは非常に異なる挙動を示すことを何卒ご了承下さい。