2012-06-01 11 views
33

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

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

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

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

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

धन्यवाद

उत्तर

9

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

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 को छोड़कर, कुछ हद तक)।

+0

असल में, फ़ायरफ़ॉक्स का व्यवहार छवि को तब भी नहीं दिखाना था जब इसे लोड नहीं किया जा सका - लेकिन इसे छवि पर 'डिस्प्ले: इनलाइन-ब्लॉक' डालकर ओपेरा की तरह व्यवहार करने के लिए बनाया जा सकता था। – Brilliand

+1

आपके उत्तर के लिए धन्यवाद।जब मैंने आईएमजी टैग के अंदर चौड़ाई और ऊंचाई छोड़ी तो कोशिश की तो लेआउट व्यूपोर्ट आकार बदलते समय छवि स्केल नहीं हुई। मुझे लगता है कि इनलाइन चौड़ाई और ऊंचाई स्थानीय हैं क्योंकि वे सीएसएस नियम मजबूत हैं। मेरे लिए ऐसा लगता है कि मैं चौड़ाई और ऊंचाई विशेषताओं को हटा सकता हूं और फिर मेरे पास "द्रव छवियां" होंगी जो व्यूपोर्ट के आकार में परिवर्तन के साथ स्केल करती हैं और पेज लोड गति बलिदान करती हैं या उन गुणों को छोड़ने और "द्रव छवियों" पेशेवरों को त्यागने के लिए । अगर मैं सही हूं तो मैं कैसे बलिदान करना चुनता हूं। – ProgNet

+0

सीएसएस के संदर्भ में, HTML (यानी चौड़ाई = और ऊंचाई =) में विशेषताओं के माध्यम से सेट मान न्यूनतम प्राथमिकता हैं, जबकि "शैली" विशेषता में सीएसएस के माध्यम से सेट मान अधिकतम प्राथमिकता हैं। इसलिए ओपेरा, फ़ायरफ़ॉक्स और आईई 9 के व्यवहार के लिए औचित्य, जो पूरी तरह से "ऊंचाई =" को अनदेखा करना है यदि आप अपने सीएसएस में ऊंचाई (यहां तक ​​कि 'ऊंचाई: ऑटो') सेट करते हैं। – Brilliand

16

हालांकि (जैसा कि मैंने अपने अन्य उत्तर में कहा है) 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/

3

आप

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

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

+0

धन्यवाद यह वही है जो मैं ढूंढ रहा था। इसके अलावा जब निश्चित चौड़ाई/ऊंचाई एटीआर के बिना छवियों का उपयोग करते हैं तो आप संपत्ति की ऊंचाई का उपयोग कर सकते हैं: ऑटो 'सभी छवियों को स्केल में रखते हुए। – Jake

+0

मेरी खुशी श्री जेक –