दिलचस्प पोस्ट
एक्ट्रोफिल्ड के साथ आईटेक्स्ट मर्ज दस्तावेज़ php: json सरणी के माध्यम से लूप एकाधिक डेक्स फाइलें लैंडरोड / सपोर्ट / एनोटेशन / एनिररस को परिभाषित करती हैं अतिव्यापी घटनाओं के साथ स्ट्रिंग गणना विजुअल मूल में JSON का उपयोग करना क्लासेस। क्या बात है? मेमोरी कैच कॉन्फ़िगरेशन में स्मृति सीमा का पालन नहीं करता है थ्रेड सुरक्षित-यूनिट के लिए यूनिट टेस्ट? ईसी 2 उदाहरणों को कैसे फेंकें और उनमें से प्रत्येक पर स्टार्टअप स्क्रिप्ट अपलोड करें? विज़ुअल स्टूडियो डिज़ाइन मोड त्रुटियों का निवारण और डीबग कैसे करें? सेलेनियम वेबड्राइवर में फ़ायरफ़ॉक्सड्राइवर, क्रोमड्राइवर और आईईडीआरियर के लिए मूलभूत प्रमाणीकरण कैसे करें? कैमरे के इरादे को खारिज करने से पहले कई फ़ोटो कैसे लें? MySQL लिनक्स सर्वर पर PDO ड्राइवर स्थापित करना सी # में नाम से एक Windows प्रपत्र नियंत्रण प्राप्त करें जावा ऑब्जेक्ट हैडर में क्या है

एक छवि को उत्तरदायी बनाएं – आसान तरीका

मैं थोड़ी देर के लिए इस के समाधान की खोज कर रहा हूं, कोई भाग्य नहीं है।

मुझे लगता है कि मेरा कोड इस बात से उत्तरदायी है कि अगर मैं इसे फ़ोन या टैबलेट के आकार में ढंकता हूं – तदनुसार सभी पाठ, लिंक, और सामाजिक आइकनों पैमाने पर।

हालांकि, केवल एक चीज जो शरीर में मेरी छवि नहीं है; जो पैराग्राफ टैग में लपेटा हुआ है .. इसके साथ ही कहा जा रहा है, क्या छवि को भी उत्तरदायी बनाने का एक आसान तरीका है?

धन्यवाद!

यहां कोड है जिसका उपयोग मैं शरीर में मेरी छवि दिखाने के लिए किया था:

</body> </center> <p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p> </center> </body> 

Solutions Collecting From Web of "एक छवि को उत्तरदायी बनाएं – आसान तरीका"

आप ऐसा करने का प्रयास कर सकते हैं

 <p> <a href="MY WEBSITE LINK" target="_blank"> <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null"> </a> </p> 

यदि आपकी तरल लेआउट में आपकी छवि को स्केल करना चाहिए।

उत्तरदायी (जिसका मतलब है कि आपका लेआउट विंडो के आकार के प्रति प्रतिक्रिया करता है) के लिए आप छवि की एक श्रेणी जोड़ सकते हैं और छवि की चौड़ाई बदलने के लिए सीएसएस में @media क्वेरी का उपयोग कर सकते हैं।

ध्यान दें कि छवि की ऊंचाई को बदलना गड़बड़ अनुपात होगा

चौड़ाईः जब आप व्यापक रूप से देखते हैं तो 100% इसे टूट जाएगा।

निम्नलिखित बूटस्ट्रैप का आईएमजी-उत्तरदायी है I

 max-width: 100%; display:block; height: auto; 

मैं HTML फ़ाइल की तुलना में एक अलग फ़ाइल में सभी सीएसएस गुणों का उपयोग करने की सलाह देता हूं, ताकि आप अपना कोड बेहतर ढंग से व्यवस्थित कर सकें।

तो अपने आईएमजी उत्तरदायी बनाने के लिए मैं क्या करूँगा:

सबसे पहले, अपनी HTML फ़ाइल में class या id विशेषता का उपयोग करके अपना <img> टैग नाम दें:

 <img src="IMAGE LINK" border="0" class="responsive-image" alt="Null"> 

फिर, मेरी सीएसएस फ़ाइल में मैं इसे उत्तरदायी बनाने के लिए परिवर्तन करूंगा:

 .responsive-image { height: auto; width: 100%; } 

मैं इस तकनीक का उपयोग मोबाइल उपकरणों के लिए उत्तरदायी रूप से मात्र तरीके से रखने के लिए कर रहा हूं। लोगो स्वचालित रूप से आकार बदल जाएगा।

एचटीएमएल

 <div id="logo_wrapper"> <a href="http://example.com" target="_blank"> <img src="http://example.com/image.jpg" border="0" alt="logo" /> </a> </div> 

सीएसएस

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

आशा है कि यह मदद मिलेगी

धन्यवाद

अपनी वेबसाइट पर सभी छवियों को उत्तरदायी बनाने के लिए, अपने इनलाइन एचटीएमएल को सही मार्कअप से बदल नहीं सकते, चौड़ाई के अनुसार: 100% सभी ब्राउज़रों में काम नहीं करता है, और फ़ायरफ़ॉक्स में समस्याएं पैदा होती हैं। आप जो करना चाहते हैं वह आपकी वेबसाइट पर आपकी छवियां डालता है कि आप सामान्य रूप से कैसा होना चाहिए:

 <img src="image.jpg" width="1200px" height="600px" /> 

और फिर अपने सीएसएस में जोड़ें कि कोई छवि अधिकतम-चौड़ाई 100% है, जिसकी ऊंचाई ऑटो पर है:

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

इस तरह आपका कोड सभी ब्राउज़रों में काम करता है यह कस्टम सीएमएस ग्राहकों (यानी कूशी सीएमएस) के साथ भी काम करेगा जिसके लिए इनलाइन एचटीएमएल में वास्तविक छवि आकार की छवियों की ज़रूरत होती है, और यह वास्तव में आसान है जब आपको इमेज को उत्तरदायी बनाने की ज़रूरत होती है तो बस आपके सीएसएस फ़ाइल को अधिकतम-चौड़ाई 100% है, जो कि ऑटो के लिए सेट है ऊंचाई मत भूलना: ऑटो या आपकी छवियां ठीक से नहीं बढ़ेगी

सेट की ऊंचाई या छवि की चौड़ाई 100% होनी चाहिए

अधिक यहाँ पर। मैं डिवि कंटेनर में फिट करने के लिए एक छवि को कैसे बदलूंगा?

एक छवि को उत्तरदायी बनाने के लिए निम्न का उपयोग करें:

सीएसएस

 .responsive-image { width: 950px;//Any width you want to set the image to. max-width: 100%; height: auto; } 

एचटीएमएल

 <img class="responsive-image" src="IMAGE URL"> 

इस पोस्ट में दो साल देर हो चुकी है .. क्या आप <img> टैग का उपयोग करने के लिए विवश हैं?

मैंने इसे background-image , width: 100% और background-size: 100% साथ अपनी पसंद का कोई भी <div> या किसी अन्य तत्व को सेट करना अधिक आसान पाया है।

ये सभी उत्तरदायी छवियों का अंत नहीं है, लेकिन यह एक शुरुआत है इसके अलावा, background-size: cover साथ चारों ओर घूमने की कोशिश करें background-size: cover और शायद background-position: center साथ कुछ स्थिति।

सीएसएस:

 .image-container{ height: 100%; // doesn't have to be '%' can also use 'px' width: 100%; margin: 0 auto; padding: 0; background-image: url(../img/exampleImage.jpg); background-position: top center; background-repeat: no-repeat; background-size: 100%; } 

HMTL:

 <div class="image-container"></div> 

यह मेरे लिए हर समय उपयोगी है

आप आईएमजी वर्ग और अधिकतम-चौड़ाई वाली संपत्ति को अनुकूलित कर सकते हैं।

 img{ width: 100%; max-width: 800px; } 

अधिकतम चौड़ाई अन्यथा आप छवि डेस्कटॉप के लिए बहुत अधिक पैमाने पर होगा। ऊंचाई की संपत्ति नहीं डालनी चाहिए क्योंकि डिफ़ॉल्ट रूप से यह ऑटो मोड है।

छवियाँ इस तरह सेट की जानी चाहिए

 img { max-width: 100%; } 

बूटस्ट्रैप का इस्तेमाल आपकी छवियों के साथ मुक्त होने के लिए करें, जैसा कि उपयोग किए गए क्लास आईएमजी-उत्तरदायी दिखाया गया है और आप कर चुके हैं

 <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 

छवि को संवेदनशील बनाने के लिए सीएसएस जोड़ने के बजाय, विभिन्न रेजोल्यूशन छवियों को अलग-अलग स्क्रीन रिज़ॉल्यूशन जोड़ने से ऐप अधिक कुशल हो जाएगा

मोबाइल ब्राउज़रों को एक ही उच्च रिज़ॉल्यूशन छवि की आवश्यकता नहीं है जो कि डेस्कटॉप ब्राउज़र की आवश्यकता होती है।

एसएएसएस का इस्तेमाल करना मीडिया क्वैरीज़ का उपयोग करके विभिन्न संकल्प के लिए छवि के विभिन्न संस्करणों का उपयोग करना आसान है।