सीएसएस छद्म तत्व आकार मुद्दे

Question

कृपया मुझे बताओ क्यों :before छद्म तत्व एक नियमित img इस मामले में की तरह व्यवहार नहीं करता है:

वाम एक एक img अंदर और img के साथ div है चौड़ाई और ऊंचाई 100% के बराबर होती है। सही div:before और :before की चौड़ाई और ऊंचाई भी 100% है, लेकिन प्रभाव अलग है!

(मैं मैं एक background-image तरीके का उपयोग कर सकते हैं पता है, लेकिन क्या :pseudo साथ कुछ गड़बड़ है जब इसकी content संपत्ति url() है?)

फिडल: 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

कि विभिन्न ब्राउज़रों नोटिस कृपया बहुत अलग व्यवहार प्रदर्शित करते हैं।