उत्तरदायी छवि एचटीएमएल

Question

मैं उत्तरदायी डिजाइन के बारे में पढ़ रहा हूँ में चौड़ाई और एक छवि की ऊँचाई निर्दिष्ट और मैं निम्नलिखित समस्या मिली बनाम:

के बारे में "द्रव छवियाँ" सिफारिशों में से एक के रूप में एक सीएसएस नियम का उपयोग करने के लिए है :

img { 
max-width: 100%; 
height: auto; } 

, लेकिन उसे इसका अधिकार को प्रभावित हम इनलाइन छवि चौड़ाई पट्टी की जरूरत है और ऊंचाई img टैग की विशेषताओं के लिए के लिए में।

It’s important to specify the width and height of an image in HTML के साथ कैसे व्यवस्थित होता है?

धन्यवाद

Answer 1

आप छवि चौड़ाई और ऊंचाई पट्टी की जरूरत नहीं है जिम्मेदार बताते हैं।

jsFiddle: http://jsfiddle.net/7j3db/

क्रोम, फायरफॉक्स, ओपेरा, IE9 और IE9 IE7 नकल में परीक्षण किया गया। आपके द्वारा वर्णित सटीक सीएसएस नियम के साथ, उन सभी में ठीक काम करने लगता है।

संपादित करें: एक छवि के साथ परीक्षण किया गया है कि लोड नहीं किया जा सकता है: http://jsfiddle.net/7j3db/1/

यह क्रोम और IE (यहां तक ​​कि IE7) में उचित प्रभाव नहीं पड़ा, लेकिन नहीं Firefox या ओपेरा में। हालांकि, फ़ायरफ़ॉक्स और ओपेरा में भी, प्रभाव चौड़ाई और ऊंचाई विशेषताओं को छोड़ दिया गया था (क्योंकि चौड़ाई विशेषता का प्रभाव अभी भी प्रभाव पड़ा था, भले ही ऊंचाई विशेषता नहीं थी)।

alt text (http://jsfiddle.net/7j3db/2/) के साथ आगे परीक्षण: आईई 7 द्वारा पूरी तरह से संभाला गया, लेकिन आईई 9 ओपेरा में शामिल हो गया, और आईई 8 कुछ अजीब करता है (छवि ऊंचाई alt टेक्स्ट की लंबाई पर निर्भर करती है - अधिक alt टेक्स्ट, कम स्थान)। क्रोम पूरी तरह से Alt पाठ को अनदेखा करता प्रतीत होता है। ओपेरा और एफएफ alt टेक्स्ट दिखाते हैं, लेकिन अन्यथा अनिवार्य रूप से वही व्यवहार होता है जैसा उन्होंने पहले किया था। चौड़ाई और ऊंचाई विशेषताओं में से किसी भी इन टेक्स्ट टेक्स्ट की समस्याओं के लिए जिम्मेदार प्रतीत नहीं होता है, हालांकि (IE8 को छोड़कर, कुछ हद तक)।

Answer 2

हालांकि (जैसा कि मैंने अपने अन्य उत्तर में कहा है) width और height विशेषताएं द्रव छवियों में हस्तक्षेप नहीं करती हैं, तरल छवियां क्रोम के अलावा अन्य ब्राउज़रों में उचित मात्रा में स्थान लेते हुए अभी तक लोड की गई छवियों में हस्तक्षेप नहीं करती हैं। इस के लिए एक समाधान है: एक आंतरिक अनुपात के साथ एक div में छवि लपेटो, इस आलेख में वर्णित के रूप में:, ताकि अधिकतम-चौड़ाई प्रभाव सही पाने के लिए http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper { 
    max-width: 200px; /* The actual width of the image */ 
} 

.img-wrapper2 { 
    height: 0; 
    padding-bottom: 100%; /* The image's height divided by its width */ 
} 

दुर्भाग्य से यह दो आवरण divs की आवश्यकता है। हालांकि, यह स्पष्ट लोडिंग गति के समान फायदे प्रदान करता है कि width और height विशेषताएँ प्रदान करती हैं। पुराने आईई के कुछ पैथोलॉजिकल व्यवहार को छिपाने के लिए आप .img-wrapperoverflow: hidden देना चाह सकते हैं।

jsFiddle: http://jsfiddle.net/7j3db/32/

Answer 3

आप

html, body{ 
max-width:100%; 
width:100%; 
} 

जोड़ने और भी img टैग की मूल div पर इन गुणों रख कर इस लक्ष्य को हासिल कर सकते हैं।