प्रतिशत चौड़ाई मानों के साथ डीआईवी छवि रैपर की गलत ऊंचाई

Question

मैं एक छवि को एक HTML DIV में लपेटना चाहता हूं और, क्योंकि मैं चाहता हूं कि यह विंडो के आकार के साथ पूरी तरह से स्केलेबल हो, मैं DIV की चौड़ाई निर्धारित करना चाहता हूं प्रतिशत इस प्रकार है:

एचटीएमएल

<div id="wrapper"> 
    <img src="http://openclipart.org/people/netalloy/rally-car.svg" /> 
</div> 

सीएसएस

#wrapper { 
    position: absolute; 
    width: 50%; 
} 

#wrapper img { 
    width: 100%; 
} 

छवि को इसके कंटेनर की ऊंचाई निर्धारित करना चाहिए। ऐसा इसलिए है क्योंकि छवि चौड़ाई 100% पर सेट की गई है और छवि ऊंचाई की गणना सही पहलू अनुपात को बनाए रखने के अनुसार की जाती है।

परिणाम jsfiddle पर दिखाई देता है: http://jsfiddle.net/lorenzopolidori/5BN4g/15/

मेरे प्रश्न हैं:

1. क्यों सभी आधुनिक ब्राउज़रों आवरण DIV 5px भीतरी छवि से लंबे प्रस्तुत करना हो?
2. जावास्क्रिप्ट का उपयोग करते हुए के बिना सभी आकारों को प्रतिशत और में सेट करते हुए, मैं इस 5px अंतर से कैसे छुटकारा पा सकता हूं?

हैरानी की बात है, इस क्रोम (21.0.1180.89), Firefox (15.0.1) और IE8 में होता है, IE7 इसे सही ढंग से renders जबकि, छवि की ऊंचाई के साथ DIV की ऊंचाई से मेल खाते।

Answer 1

ठीक है, के बारे में नगण्य है, मैं एक अच्छा संभव समाधान पाया: एक block प्रदर्शित करने के लिए

#wrapper img { 
    display: block; 
    width: 100%; 
    border: 1px dashed red; 

}

डिफ़ॉल्ट inline प्रदर्शन से बदल रहा है line-height समस्या का निराकरण किया तुरंत।

यह दृष्टिकोण भी शब्दार्थ क्योंकि इस मामले में क्या हम वास्तव में चाहते हैं कि उसे किसी भी अन्य तत्वों के बिना एक DIV में लिपटे एक ही छवि है, तो line-height जरूरतों की अवधारणा है में सही पूरी तरह से छवि प्रदर्शित द्वारा बंद का सफाया किया जा रहा है एक ब्लॉक के रूप में।

यह सभी प्रमुख ब्राउज़रों पर काम करता है: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/

Answer 2

मुझे लगता है कि आप ब्राउज़र को सही ढंग से img टैग दिखाने के लिए मजबूर करने के लिए संपत्ति को संरेखित करते हैं।

<div id="wrapper"> 
    <img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" /> 
</div> 

DEMO

Answer 3

................

हाय अब अपनी img tag फेंक सीएसएस में vertical-align:top जोड़ने की तरह के रूप में

इस

#wrapper img { 
    width: 100%; 
    border: 1px dashed red; 
    vertical-align:top; // add this line 
} 

live demo

Answer 4

चेक बाहर इस:

http://jsfiddle.net/5BN4g/29/

यह पंक्ति-ऊंचाई मुद्दा :-)

आप की जरूरत है:

#wrapper { 
    width: 60%; 
    background-color: #aaa; 
    margin: 50px auto; 
    line-height:0; 
} 

#wrapper img { 
    width:100%; 
    border: 1px dashed red; 
    box-sizing:border-box; 
} 
​ 

मैं बॉक्स आकार इस्तेमाल किया यकीन है कि छवि की चौड़ाई बनाने के लिए कंटेनर अतिप्रवाह नहीं करता

Answer 5

मुझे लगता है क्योंकि यह तालिका

मैंने डिस्प्ले जोड़ा: आपके कोड में तालिका

टैग, सटीक होना करने के लिए - - 10

और यह अब ठीक लग रहा है, लिंक

Example Display Table

Answer 6

आपका मुद्दा यह है कि एक छवि है की जाँच एक इनलाइन तत्व है। आपको बस छवि पर display: block सेट करना है और अतिरिक्त पैडिंग दूर हो गई है। Demo।