html - Why <img>'s are not stretched when sized with left / right / top / bottom vs width / height -

मुझे समझना चाहिए कि क्यों & lt; img & gt; शेष ब्लॉक तत्वों जब आकार (शीर्ष / बायां / चौड़ाई / ऊंचाई) के बजाय (शीर्ष / बायां / नीचे / दाईं ओर) परिभाषित किया जाता है।

एक & lt; आईएमजी & gt; एक से बेहतर है हज़ार शब्द हैं, तो कृपया नीचे स्नैपशॉट पर एक नज़र डालें:

इसके अलावा, मैं जानना चाहूंगा कि क्या मैं अतिरिक्त सीएसएस के माध्यम से अंतर्निहित आकार का उपयोग करके स्पष्ट आकार के व्यवहार को मजबूर कर सकता हूं।

सीएसएस

  .container {छिपा हुआ सैलाब; स्थिति: रिश्तेदार; चौड़ाई: 200px; ऊँचाई: 200px; display: inline-ब्लॉक; } #implicitsize {स्थिति: पूर्ण; शीर्ष: 0px; बाएं: 0px; सही: 0px; नीचे: 0px; } #explicitsize {स्थिति: पूर्ण; शीर्ष: 0px; बाएं: 0px; चौड़ाई: 100%; ऊंचाई: 100%; }  

और HTML

  & lt; div class = "container" & gt; & lt; img id = "explicitsize" src = "https: // c2.staticflickr.com/4/3293/3129420363_ea8515d81a.jpg"></div> & Lt; div वर्ग = "कंटेनर" & gt; आईएमजी आईडी = "निरोधक" src = "https://c2.staticflickr.com/4/3293/3129420363_ea8515d81a.jpg" & gt; & lt; / div & gt;   
 पीडी-फिडल   
 
 
 यह इसलिए है क्योंकि    /  नीचे    के  के  कोड> अति-विवश है, एक बार जब आप  शीर्ष  के लिए मान सेट करते हैं, तो  नीचे  को नजरअंदाज कर दिया जाएगा यह  बाएं  /  सही  गुणों के लिए भी सही है। 
 
 
   /   
 
 
 यदि इस बिंदु पर मान अधिक-विवश हो गए हैं, तो 'बाएं' के लिए मूल्य को अनदेखा करें (यदि उस ब्लॉक की 'दिशा' संपत्ति है 'rtl' ) या 'दाएं' (यदि 'दिशा' है तो 'ltr') और उस मान के लिए हल करें। 
 
 
 
 
   /   
 
 
 यदि इस बिंदु पर मान अधिक-विवश हैं, तो 'नीचे' के मान को अनदेखा करें और उस मान के लिए हल करें। 
 
 
 
 इसलिए इस स्थिति में  शीर्ष  और  के सम्बन्ध में स्थिति 
  < कोड> ऑफसेट और यह  शीर्ष ,  नीचे ,  right  और  बायां  गुणों से नहीं बढ़ाया जाएगा।