छवि आकार को आईएमजी टैग ऊंचाई/चौड़ाई विशेषताओं या सीएसएस में परिभाषित किया जाना चाहिए?

Question

क्या यह img टैग की width और height विशेषताओं में छवियों के आकार को परिभाषित करने के लिए बेहतर कोडिंग अभ्यास है?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" /> 

या सीएसएस शैली में चौड़ाई/ऊंचाई के साथ?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" /> 

या दोनों?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" /> 

Answer 1

मैं अनाज यहाँ और राज्य के खिलाफ जाने के लिए है कि लेआउट से सामग्री (जो जवाब है कि सीएसएस उपयोग करने का सुझाव सही होगा) को अलग करने का सिद्धांत हमेशा छवि ऊंचाई और चौड़ाई पर लागू नहीं होता जा रहा हूँ।

प्रत्येक छवि में एक सहज, मूल ऊंचाई और चौड़ाई है जो छवि डेटा से प्राप्त की जा सकती है। सामग्री बनाम लेआउट के ढांचे में, मैं कहूंगा कि यह व्युत्पन्न ऊंचाई और चौड़ाई की जानकारी सामग्री है, लेआउट नहीं है, और इसलिए इसे तत्व विशेषताओं के रूप में HTML के रूप में प्रस्तुत किया जाना चाहिए।

यह alt पाठ है, जो भी छवि से प्राप्त किया जा करने के लिए कहा जा सकता है की तरह है। यह इस विचार का भी समर्थन करता है कि एक मनमानी उपयोगकर्ता एजेंट (उदा। एक भाषण ब्राउज़र) में उस जानकारी को उपयोगकर्ता से संबंधित करने के लिए होना चाहिए। कम से कम, पहलू अनुपात उपयोगी साबित हो सकता है ("छवि की चौड़ाई 15 है और 200 की ऊंचाई")। ऐसे उपयोगकर्ता एजेंट किसी भी सीएसएस को जरूरी नहीं करेंगे।

कल्पना का कहना है कि width और height गुण भी ऊंचाई और चौड़ाई वास्तविक छवि फ़ाइल में अवगत करा दिया ओवरराइड करने के लिए इस्तेमाल किया जा सकता। मैं सुझाव नहीं दे रहा हूं कि उनका उपयोग इस के लिए किया जाए। ऊंचाई और चौड़ाई को ओवरराइड करने के लिए, मेरा मानना ​​है कि सीएसएस (इनलाइन, एम्बेडेड या बाहरी) सबसे अच्छा तरीका है।

तो आप जो करना चाहते हैं उसके आधार पर, आप एक और/या दूसरे को निर्दिष्ट करेंगे। मुझे आदर्श लगता है कि मूल ऊंचाई और चौड़ाई हमेशा HTML तत्व विशेषताओं के रूप में निर्दिष्ट की जाएगी, जबकि स्टाइलिंग जानकारी वैकल्पिक रूप से सीएसएस में व्यक्त की जानी चाहिए।

Answer 2

निश्चित रूप से दोनों नहीं। इसके अलावा मुझे यह कहना होगा कि यह एक व्यक्तिगत वरीयता है। अगर मैं कोड को कम करने के लिए एक ही आकार में कई छवियों का उपयोग करता हूं तो मैं सीएसएस का उपयोग करता हूं।

.my_images img {width: 20px; height:20px} 

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

Answer 3

<img id="uxcMyImageId" src"myImage" width="100" height="100" /> 

छवि टैग में चौड़ाई और ऊंचाई निर्दिष्ट करने के लिए एक अच्छा तरीका practice..this पृष्ठ लोड होने वहाँ अंतरिक्ष छवि के लिए आवंटित किया जाता है और भले ही चित्र एक लंबा समय लगता लेआउट किसी भी झटके कष्ट नहीं होता है लोड करने के लिए।

Answer 4

हालांकि इनलाइन शैलियों का उपयोग करना ठीक है, पृष्ठ पर बाहरी सीएसएस फ़ाइल सहित आपके उद्देश्यों को बेहतर ढंग से सेवा दी जा सकती है। इस तरह आप छवि की एक कक्षा को परिभाषित कर सकते हैं (यानी 'थंबनेल', 'फोटो', 'बड़ा', आदि) और इसे स्थिर आकार असाइन करें। जब आप छवियों के साथ समाप्त होते हैं तो यह कई पृष्ठों पर एक ही प्लेसमेंट की आवश्यकता होती है।

इस तरह:

 
In your header: 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 

Your HTML: 
<img class="thumbnail" src="images/academia_vs_business.png" alt="" /> 

In css/style.css: 
img.thumbnail { 
    width: 75px; 
    height: 75px; 
} 

आप हालांकि इनलाइन शैलियों का उपयोग करना चाहते हैं तो, यह शायद पठनीयता के कारण शैली विशेषता का उपयोग चौड़ाई और ऊंचाई निर्धारित करने के लिए सबसे अच्छा है।

Answer 5

टैग में ऊंचाई/चौड़ाई को परिभाषित करने का ऐतिहासिक कारण यह है कि ब्राउज़र सीएसएस और/या छवि संसाधनों को लोड होने से पहले पृष्ठ में वास्तविक <img> तत्वों का आकार दे सकता है। यदि आप ऊंचाई और चौड़ाई की आपूर्ति नहीं करते हैं तो स्पष्ट रूप से <img> तत्व 0x0 पर प्रस्तुत किया जाएगा जब तक कि ब्राउज़र फ़ाइल के आधार पर आकार का आकार न दे। जब ऐसा होता है तो छवि लोड होने के बाद पृष्ठ के विज़ुअल रीफ्लो का कारण बनता है, और यदि आपके पास पृष्ठ पर एकाधिक छवियां हैं तो यह मिश्रित है। ऊंचाई/चौड़ाई के माध्यम से <img> का आकार सही आकार पर पृष्ठ प्रवाह में एक भौतिक प्लेसहोल्डर बनाता है, जिससे उपयोगकर्ता सामग्री को उपयोगकर्ता अनुभव को बाधित किए बिना असीमित रूप से लोड करने में सक्षम बनाता है।

वैकल्पिक रूप से, अगर आप मोबाइल-उत्तरदायी डिजाइन, एक सबसे अच्छा अभ्यास इन दिनों है जो कर रहे हैं, यह काफी आम चौड़ाई (या अधिकतम-चौड़ाई) केवल निर्दिष्ट और auto के रूप में ऊंचाई परिभाषित करने के लिए है। इस तरह जब आप अलग-अलग स्क्रीन चौड़ाई के लिए मीडिया प्रश्नों (उदा। सीएसएस) को परिभाषित करते हैं, तो आप छवि की चौड़ाई को समायोजित कर सकते हैं और ब्राउज़र की छवि ऊंचाई/पहलू अनुपात को सही रखने के साथ सौदा कर सकते हैं। यह एक मध्यम ग्राउंड दृष्टिकोण है, क्योंकि आपको कुछ रिफ्लो मिल सकता है, लेकिन यह आपको स्क्रीन आकारों की विस्तृत श्रृंखला का समर्थन करने की अनुमति देता है, इसलिए लाभ आमतौर पर नकारात्मक से अधिक होता है।

अंत में, ऐसे समय होते हैं जब आप समय से पहले छवि आकार नहीं जानते हैं (छवि src गतिशील रूप से लोड हो सकती है, या पृष्ठ के जीवनकाल के दौरान स्क्रिप्ट के माध्यम से बदल सकती है) जिसमें सीएसएस का उपयोग केवल तभी होता है।

नीचे की रेखा यह है कि आपको व्यापार-बंद समझने की आवश्यकता है और यह तय करना है कि आप कौन सी रणनीति हासिल करने की कोशिश कर रहे हैं, इसके लिए कौन सी रणनीति सबसे अधिक समझ में आती है।

Answer 6

विकल्प ए। सरल सीधे fwd। आप जो देखते हैं वह आपको गणना करने में आसान होता है।

विकल्प बी। इस इनलाइन को करने के लिए बहुत गन्दा जब तक कि आप ऐसी साइट नहीं लेना चाहते जो खिंचाव कर सके। आईई अगर आपने with:86em का उपयोग किया है, हालांकि आधुनिक ब्राउज़र मेरे उद्देश्यों के लिए यह कार्यात्मक रूप से पर्याप्त रूप से संभालने लगते हैं .. निजी तौर पर एकमात्र ऐसा समय जब मैं ऐसा कुछ उपयोग करता हूं तो यह है कि अगर मैं थंबनेल सूची बनाना चाहता हूं।

/*css*/ 
ul.myThumbs{} 
ul.myThumbs li {float:left; width:50px;} 
ul.myThumbs li img{width:50px; height:50px;border:0;} 

<!--html--> 
<ul><li> 
<img src="~/img/products/thumbs/productid.jpg" alt="" /> 
</li></ul> 

विकल्प सी। बनाए रखने के लिए बहुत गन्दा।

Answer 7

मैं अपने ऐप में समृद्ध टेक्स्ट संपादन की अनुमति देने के लिए contentEditable का उपयोग कर रहा हूं। मैं नहीं पता है कि यह कैसे के माध्यम से निकल जाता है, लेकिन जब एक छवि सम्मिलित किया जाता है, और फिर (उसके पक्ष में एंकर खींचकर) आकार दिया, यह कुछ इस तरह उत्पन्न करता है:

<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/> 

(बाद के परीक्षण से पता चला है कि छवियों डाला इस "दुष्ट" शैली attr + param शामिल नहीं था)।

जब ब्राउज़र (आईई 7) द्वारा प्रस्तुत किया जाता है, तो शैली में चौड़ाई और ऊंचाई आईएमजी चौड़ाई/ऊंचाई परम को ओवरराइड करती है (इसलिए छवि को दिखाया गया है कि मैं इसे कैसे चाहता था .. 55px x 55px में बदल गया। तो सब ठीक हो गया तो ऐसा लगता है।

जब मैं माइम प्रकार के अनुप्रयोग/msword को सेट करके या msword दस्तावेज़ में ब्राउज़र प्रतिपादन चिपकाकर एक एमएस-शब्द दस्तावेज़ में पृष्ठ आउटपुट करता हूं, तो सभी छवियां वापस अपने डिफ़ॉल्ट आकार में वापस आती हैं। अंततः मुझे पता चला कि msword शैली को छोड़ रहा है और आईएमजी चौड़ाई और ऊंचाई टैग का उपयोग कर रहा है (जिसमें मूल छवि आकार का मूल्य है)।

मुझे यह पता लगाने में थोड़ी देर लग गई। वैसे भी ... मैंने सभी टैगों को पार करने और img.width और style.height में img style.width और style.height मानों को "स्थानांतरित करने" के लिए एक जावास्क्रिप्ट फ़ंक्शन को कोड किया है, फिर आगे बढ़ने से पहले, शैली में दोनों मानों को साफ़ करना डेटाबेस में html/richtext डेटा के इस टुकड़े को सहेजना।

चीयर्स।

opps .. मेरा जवाब है .. नहीं। स्टाइल की बजाय आईएमजी के तहत दोनों विशेषताओं को सीधे छोड़ दें।