आईएमजी आयामों को मजबूर करने के लिए एचटीएमएल ब्लॉक की आवश्यकता है?

Question

मेरे पास एक ऐसी स्थिति है जहां मुझे एक HTML img चाहिए जो अभी तक प्री-सेट ऊंचाई के लिए लोड नहीं हुआ है। इसका कारण यह है कि इस ऊंचाई का उपयोग गणना में किया जाएगा जो छवि पूरी तरह से लोड होने से पहले आग लग सकती है और सटीक रहने की आवश्यकता है। मैं निम्नलिखित की कोशिश की:

<div>hello<img src='http://example.com/invalid.gif' class="testimage"> there</div> 

और कुछ सीएसएस

.testimage { 
    height: 200px; 
    width: 200px; 
} 
​ 

और कम से कम फ़ायरफ़ॉक्स 5 में, अतिरिक्त स्थान प्रदान नहीं किया गया है (और अजीब तरह से टूटे हुए छवि या तो प्रदर्शित नहीं करता है में डाल दिया, बस एक खाली जगह)। यही है, जब तक मैं display: inline-block जोड़ता हूं। कम से कम कुछ अन्य ब्राउज़रों में inline का डिफ़ॉल्ट प्रदर्शन वांछित परिणाम उत्पन्न करता है। क्या यह उम्मीद है? यदि हां, तो क्यों?

यहाँ एक jsFiddle रूप में अच्छी तरह है: http://jsfiddle.net/uYXD4/

Answer 1

छवियाँ replaced elements हैं इंतजार कर रहा है:

एक तत्व जिनकी सामग्री है सीएसएस स्वरूपण मॉडल के दायरे के बाहर, जैसे एक छवि, एम्बेडेड दस्तावेज़, या एप्लेट। उदाहरण के लिए, एचटीएमएल आईएमजी तत्व की सामग्री अक्सर छवि द्वारा प्रतिस्थापित की जाती है कि इसकी "src" विशेषता निर्दिष्ट होती है।

प्रतिस्थापित तत्वों के लिए, display: inline-blocksupposed to have the same exact same efffectdisplay: inline, जो डिफ़ॉल्ट है के रूप में है।

तो यह कुछ ब्राउज़रों * में कि अजीब व्यवहार के लिए एक संभावित व्याख्या हो सकती है:

रूप प्रतिस्थापित तत्वों वे केवल पूरी तरह से लोड छवियों का इलाज, और नहीं तो उन्हें गैर प्रतिस्थापित तत्वों के रूप में व्यवहार करते हैं। यह सब के बाद समझ में आता है, और मानक स्पष्ट रूप से इसे अस्वीकार नहीं करता है।एक परिणाम के रूप में, वहाँ 3 संभव परिदृश्यों है:

1. प्रतिस्थापित तत्व, इनलाइन या इनलाइन-ब्लॉक कोई फर्क नहीं पड़ता, height संपत्ति काम करता है
2. इनलाइन गैर प्रतिस्थापित तत्व, height विशेषता has no effect
3. इनलाइन-ब्लॉक गैर -replaced तत्व, height संपत्ति काम करता है

लोडेड छवियों को हमेशा के रूप में 1. चुने जाते हैं, और यदि आप प्रदर्शन सेट टूट/लोड हो रहा है छवियों के रूप में 1. या 2. (या 3. अर्हता प्राप्त कर सकते: स्पष्ट रूप से इनलाइन-ब्लॉक)

* सुनिश्चित नहीं है कि चीजें वास्तव में कैसे काम करती हैं।

Answer 2

इसे यहाँ का कहना है कि छवियों इनलाइन तत्व हैं - http://htmlhelp.com/reference/html40/special/img.html

दूसरी ओर यहां एक बार देख ले - Is <img> element block level or inline level?

यह <img> तरह लग रहा है तत्व इनलाइन और ब्लॉक दोनों तरह का है। इसे परिभाषित करने के लिए कोई सख्त नियम नहीं है, इसलिए शायद ब्राउज़र विक्रेता डिफ़ॉल्ट के बारे में अपने निर्णय लेते हैं। तो आपका सर्वश्रेष्ठ दांव display: inline-block

Answer 3

को उनकी मान्यताओं पुनर्स्थापित करने के लिए की तरह

<img src="..." width=400 height=200> 

मैं सटीक एक ही बात कर रहा हूँ कुछ का उपयोग क्यों नहीं है और यह बहुत अच्छी तरह से काम करता है। एक अन्य विकल्प है ...

$('.myimg').load(function() { /* ops */ }); 

हालांकि मैं नहीं जानता कि यदि सभी ब्राउज़रों में छवि को लोड करने या नहीं