मैं मोबाइल साइट के लिए स्वचालित रूप से किसी छवि का आकार कैसे बदलूं?

मैंने इस पर एक Google खोज करने की कोशिश की और अभी भी यह नहीं पता कि विभिन्न मोबाइल उपकरणों के लिए अपनी चौड़ाई से छवि का आकार कैसे बदला जाए। यहाँ मेरी प्रयास है:मैं मोबाइल साइट के लिए स्वचालित रूप से किसी छवि का आकार कैसे बदलूं?

सीएसएस:

img.test { 
    width: 100%; 
    height: auto; 
}

HTML:

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <img class="test" src="../includes/foo.jpg">

लेकिन छवि अभी भी अपने मूल स्केलिंग के साथ भरी हुई जा रही है। मैं एक सीएसएस और एचटीएमएल newb हूँ तो कोई मदद महान होगा!

संपादित करें:

प्रतिक्रियाओं के लिए धन्यवाद। यहां एक संशोधित संस्करण है जो अब काम करता है।

HTML:

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <body width = "device-width"> 
     <img class="test" src="../includes/buoy_map.jpg"> 
    </body>

स्रोत

2011-10-05 Richard

क्या आपने छवि के किसी भी मूल तत्व को चौड़ाई दी है? – Gerben

आपका 'img' टैग' body' के अंदर होना चाहिए। आप वास्तव में एक बॉडी टैग नहीं करते हैं, इसलिए एक जोड़ें :-) – Bojangles

आपके सीएसएस का कोई प्रभाव नहीं पड़ता है क्योंकि बाह्य तत्व की चौड़ाई परिभाषित नहीं होती है (और शरीर भी गायब है)।

एक अलग दृष्टिकोण पहले से स्केल की गई छवियों को वितरित करना है। http://www.sencha.com/products/io/ उदाहरण के लिए देखने वाले डिवाइस के आधार पर छवि को पहले ही स्केल कर दिया गया है।

स्रोत

2011-10-05 13:40:52 konsolenfreddy

img { 
    max-width: 100%; 
}

का यह तत्व से युक्त है 100% तक का समय लग करने के लिए छवि सेट करनी चाहिए।

स्रोत

2011-10-05 13:37:56

यह कुछ परिस्थितियों में उपयोगी है, लेकिन यह आपकी छवि के पहलू अनुपात को अनदेखा कर देगा, संभावित रूप से इसे स्कूइंग कर देगा। – jamesnotjim

उस मामले में इसमें ऊंचाई शामिल होनी चाहिए: ऑटो; – Geomorillo

यह स्वीकार्य उत्तर होना चाहिए – niry

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

स्रोत

2013-08-28 19:22:49 squarcle

मेरे लिए, यह सबसे अच्छा काम किया छवि सीएसएस में जोड़ने के लिए: max-width:100%; और html मानकों में छवि चौड़ाई और ऊंचाई निर्दिष्ट नहीं। यह स्वचालित रूप से ऊंचाई समायोजित करते समय डिवाइस स्क्रीन में फ़िट होने के लिए चौड़ाई समायोजित करता है। अन्यथा ऊंचाई विकृत हो सकती है।

स्रोत

2014-10-13 16:32:10 adrianTNT

अगर आप बूटस्ट्रैप 3, बस अपने img टैग

<img class="img-responsive" src="...">

में img संवेदनशील जोड़ने वर्ग उपयोग करें यदि आप बूटस्ट्रैप 4, अपने img टैग में जोड़ने img-द्रव वर्ग का उपयोग

<img class="img-fluid" src="...">

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

स्रोत

2017-05-04 09:18:47

मुझे नहीं पता कि किसी ने इस जवाब को क्यों वोट दिया है। यह मेरे लिए अच्छा काम करता है। मोबाइल ब्राउज़र में छवि अच्छी तरह से निचोड़ जाती है। धन्यवाद। –

ऊंचाई: ऑटो; मेरे लिए चाल है। अब मेरी छवियां मोबाइल डिवाइस के संकल्प के अनुसार आकार बदल रही हैं। धन्यवाद –

मैं मोबाइल साइट के लिए स्वचालित रूप से किसी छवि का आकार कैसे बदलूं?

उत्तर

संबंधित मुद्दे