एचटीएमएल स्वचालित छवि पिक्सेल और प्रतिशत की कमी का उपयोग कर आकार परिवर्तन

Question

मैं कैसे एक HTML पृष्ठ में कोई चित्र जोड़ने निम्नलिखित की कमी का उपयोग कर सकते हैं:

• नहीं बढ़ाए जाने की अनुमति दी (यदि चित्र चौड़ाई 400 पिक्सेल है मैं नहीं करना चाहते इसे 600 का आकार बदलें)।
• यदि युक्त तत्व छवि से छोटा है तो छवि को डाउनस्केल्ड किया जाना चाहिए।
• पहलू अनुपात रखें।

उदाहरण के लिए मेरे पास एक छवि (400x300) है। यदि युक्त तत्व 600 पिक्सल चौड़ा है तो मैं छवि को 400x300 पर दिखाना चाहता हूं। यदि युक्त तत्व 200 पिक्सल चौड़ा है (उदाहरण के लिए यह एक मोबाइल ब्राउज़र है) मैं 200x150 पर छवि दिखाना चाहता हूं।

मैं छवि के आकार के कठिन तारों के बिना एक शुद्ध सीएसएस समाधान (यदि यह संभव है) की तलाश में हूं।

Answer 1

का उपयोग चौड़ाई के साथ एक तस्वीर के साथ यह प्रयास नहीं किया है अधिकतम-चौड़ाई संपत्ति दो बार सही ढंग से काम करता है:

<div style="max-width: 400px" > 
<img src="image.jpg" style="max-width:100%;" /> 
</div> 

Answer 2

आप अधिकतम-चौड़ाई संपत्ति का उपयोग करना चाहिए:

<div style="width:600px"> 
<img src="images/image.jpg" alt="image" style="max-width:100%;/>  
</div> 

यह माता पिता div तत्व अपनी छवि चौड़ाई, यदि आवश्यक हो तो नीचे छवि स्केलिंग विवश होगा। यह अपने पहलू अनुपात या एक छवि को स्केल नहीं खोएगा। अधिकतम-चौड़ाई डेट ब्राउज़र करने के लिए लेकिन IE6

Answer 3

यह छवि downscale नहीं है नहीं में सभी में समर्थित है। - asalamon74

मैं अपने HTML में Adamy के कोड खामियों को दूर करने और इसे छवि downscale करता है। मेरे पास प्राप्त छवि आयामों के कुछ नमूने यहां दिए गए हैं: 800w x 626h, 962x640, 895x640। इन और दूसरों के लिए, यह सही ढंग से उन सभी को स्केल कर दिया गया - जिसका अर्थ है 'शैली = "अधिकतम-चौड़ाई: 100%;"' img टैग में, छवियां मेरे कंटेनर (# फोटो-कंटेनर) की चौड़ाई के भीतर फिट होती हैं और पैमाने। यह नहीं कह रहा कि यह आपके कोड में काम करेगा, लेकिन यह मेरे लिए काम करता है। यहाँ मेरी प्रासंगिक सीएसएस/HTML कोड है:

सीएसएस:

#photo-container {display:block; float:left; width: 800px; 
        margin-left:5px; margin-top:0px; 
        padding: 10px 10px 10px 10px; 
        background-color:black; color:white; 
        border-bottom-left-radius: 0.5em; 
        border-bottom-right-radius: 0.5em; 
       } 

HTML:

<div id="photo-container"> 
     <img id="photo-display" src="PlaceHolder" alt="PlaceHolder" 
     style="max-width:100%;"> 
    </div> 

छवियों वास्तव में जावास्क्रिप्ट का उपयोग कर रखा जाता है। मेरी जावास्क्रिप्ट कोड में चयन प्रक्रिया इस विषय के लिए एक छोटे से वर्बोज़ है, लेकिन अनिवार्य रूप से यह के बराबर:

photo-display.src=myimage; 

मुझे लगता है कि है कम से कम 800

Answer 4

यह ध्यान दिया जाना चाहिए कि आपके आईएमजी टैग, चौड़ाई & ऊंचाई संपत्ति से हटाया की जरूरत है अन्यथा वह ठीक से स्केल नहीं करेगा।

Answer 5

टैग द्वारा < img> div box आदि का उपयोग किए बिना।

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