CSS में किसी इमेज की अधिकतम चौड़ाई कैसे सेट करें

Question

अपनी वेबसाइट पर मैं एक विशिष्ट आकार ( width: 600px) के साथ एक नई विंडो में उपयोगकर्ता द्वारा अपलोड की गई छवियों को प्रदर्शित करना चाहूंगा । समस्या यह है कि चित्र बड़े हो सकते हैं। इसलिए यदि वे इनसे बड़े हैं 600px, तो मैं उनका आकार बदलना चाहूंगा, जिससे पहलू अनुपात का संरक्षण होगा।

मैंने max-widthसीएसएस संपत्ति की कोशिश की , लेकिन यह काम नहीं करता है: छवि का आकार नहीं बदलता है।

क्या इस समस्या के समाधान का कोई तरीका है?

HTML :

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

सीएसएस :

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

मैंने भी max-width: 600pxएक छवि के लिए सेटिंग की कोशिश की , लेकिन काम नहीं करता है। छवि को एक सर्वलेट से स्ट्रीम किया गया है (यह टॉमकैट के वेबैप फ़ोल्डर के बाहर संग्रहीत है)।

Comments

यदि आप इसे ऑटो स्केल डाउन करना चाहते हैं max-width, तो सेट करें , सेट न करें max-heightऔर इसे काम करना चाहिए। यदि नहीं, तो अपना कोड पोस्ट करें ताकि अन्य आपको समस्या का पता लगाने में मदद कर सकें।

— रे चेंग

मैंने सिर्फ आपके उदाहरण की कोशिश की और यह यहां काम करता है। क्या आप वाकई इस उदाहरण में अपने वास्तविक html ("ImageContainerr") में समान टाइपो नहीं हैं?

— श्री लिस्टर

धिक्कार है, तुम सही हो। मैंने अपने टॉमकैट और ब्राउज़र को फिर से शुरू किया, फिर से कोशिश की - और यह वास्तव में ठीक काम करता है। वैसे भी धन्यवाद :) टाइपो मामला नहीं था - मैंने यहाँ आईडी और वर्ग का नाम बदल दिया है, इसलिए इसे समझना आसान होगा।

— user1315305

इससे मुझे लगता है कि आप Firebug या अन्य डेवलपर टूल का उपयोग नहीं करते हैं। मेरा सुझाव है कि आप खुद को फायरबग प्राप्त करें और इसका उपयोग करना सीखें। (इन दो तत्वों का निरीक्षण करके आपने देखा होगा कि चौड़ाई कंटेनर में नहीं

— डाली

चेतावनी: यह प्रश्न शुरू में प्रकट होने की तुलना में बहुत कम व्यापक रूप से लागू है। ऐसा लगता है कि बहुत सारे अपवोट हो सकते हैं क्योंकि उन अपवित्रों ने भी याद किया किidयहां सीएसएस से मेल नहीं खाता था। जैसा कि लिखा गया है (20151201), यह प्रश्न "सीएसएस ऑब्जेक्ट्स जो किसी भी डोम ऑब्जेक्ट्स से मेल नहीं खाते हैं, उपस्थिति को प्रभावित नहीं करता"। ; ^) (यह पता लगाने के लिए बेहतर नहीं होगा कि सवाल को संपादित करने के लिए बेहतर होगा कि इसका शीर्षक क्या है या नहीं ...)

— रफिन

Answer 1

आप इस तरह लिख सकते हैं:

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

इसे देखें http://jsfiddle.net/ErNeT/

Comments

आपका बहुत बहुत धन्यवाद! यह पूरी तरह से काम करता है! संपादित करें: ठीक है, बिल्कुल नहीं - यह उन छवियों का भी आकार देता है जो 600px से छोटी हैं - और यह ऐसी चीज है जो मैं नहीं चाहता।

— user1315305

मैंने नीचे मतदान किया। ओपी क्या चाहता है वह नहीं है जो आप प्रदान करते हैं। आपको यह भी महसूस होना चाहिए कि ओपी के कोड में एक समस्या हो सकती है क्योंकि सामान्य तौर पर उसने जो भी कोशिश की, उसे काम करना चाहिए .. जिसने कभी मतदान किया, मुझे कारण बताएं, धन्यवाद।

— जूनस

@ लॉरो पहले ओपी ने मेरे उत्तर के बाद अपना प्रश्न संपादित किया और क्या आप बता सकते हैं कि मेरे उत्तर में क्या गलत है? धन्यवाद

— संदीप

यह IE में पहलू अनुपात को संरक्षित नहीं करता है

— Cocowalla

"चौड़ाई: 100%" का उद्देश्य क्या है? जुड़ा हुआ बेला इसके बिना ठीक काम करने लगता है? (मैक ओएक्स पर फ़ायरफ़ॉक्स और सफारी में परीक्षण किया गया है)

— जॉन श्नाइडर

Answer 2

मैं देखता हूं कि यह अंतिम रूप में उत्तर नहीं दिया गया है।

मैं देखता हूं कि आपके पास अधिकतम-चौड़ाई 100% और चौड़ाई 600 है।

एक सरल तरीका यह भी है:

     <img src="image.png" style="max-width:600px;width:100%">

मैं अक्सर इसका उपयोग करता हूं, और फिर आप व्यक्तिगत छवियों को भी नियंत्रित कर सकते हैं, और यह सभी img टैग पर नहीं है। आप इसे नीचे की तरह CSS भी कर सकते हैं।

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">

Answer 3

समस्या यह है कि img टैग इनलाइन तत्व है और आप इनलाइन तत्व की चौड़ाई को सीमित नहीं कर सकते।

तो पहले img टैग की चौड़ाई को सीमित करने के लिए आपको इसे इनलाइन-ब्लॉक तत्व में बदलने की आवश्यकता है

img.Image{
    display: inline-block;
}

Answer 4

आपके कंटेनर की चौड़ाई 600px है।

यदि आप चाहते हैं कि केवल बड़ी छवियां ही अंदर फिट हों, तो जोड़ें: CSS:

#ImageContainer img {
    max-width: 600px;
}

यदि आप सभी चित्र avaiable (600px) स्थान लेना चाहते हैं:

#ImageContainer img {
    width: 600px;
}

Comments

साथ ही, ओपी पर टिप्पणी से संकेत मिलता है कि आप सीएसएस फ़ाइल पर गलत आईडी का उपयोग कर रहे हैं: div # ImageContainer <div id = "ImageContainerr">

— Leo Armentano

Answer 5

इसे इस्तेमाल करे

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}

Comments

वह सही नहीं है। आपके चयनकर्ता का अर्थ है "एक छवि तत्व के अंदर एक img तत्व"।

— श्री लिस्टर

Answer 6

आपका सीएसएस लगभग सही है। आप बस display: block;छवि सीएसएस में गायब हैं । आपकी आईडी में एक टाइपो भी। यह होना चाहिए<div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }

<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>