क्या आप यह कर सकते हैं? मैं उपयोगकर्ताओं को छवियों को एक कंटेनर में अपलोड कर रहा हूं जो चौड़ाई है: 100%, लेकिन मैं नहीं चाहता कि छवियां उनके मूल आकार से बड़ी हों। बहुत धन्यवाद!सीएसएस छवि अधिकतम-चौड़ाई मूल छवि आकार पर सेट है?
बस छवि के width को सेट न करें, केवल max-width।
img {max-width:100%; height:auto}
(`ऊंचाई: ऑटो आवश्यक नहीं है, लेकिन मैं अपने आप को पूर्णता के लिए वहाँ में रख, एक चेतावनी के रूप कि मैं छवि अपनी प्राकृतिक अनुपात करना चाहते हैं।)
This fiddle है दो बक्से, एक जो छवि से छोटा है और जो बड़ा है। जैसा कि आप देख सकते हैं, छोटे बॉक्स में छवि को घटाया जाता है, जबकि बड़े बॉक्स में से एक का सामान्य आकार होता है।
अगर कोई सोच रहा है (मेरे जैसा) विरासत वाली चौड़ाई सेटिंग को ओवरराइड करने के लिए, केवल चौड़ाई जोड़ें: नई कक्षा में ऑटो जिसे आप छवि को असाइन करेंगे। – grasskode
आप छवि पर शैली टैग में छवि की अधिकतम चौड़ाई सेट कर सकते हैं। फिर स्टाइल शीट में डिस्प्ले टाइप को "ब्लॉक" पर सेट करें, जो भी कंटेनर आप चाहते हैं उसकी चौड़ाई, और ऑटो की ऊंचाई। फिर मार्जिन जोड़ें: 0px ऑटो उस पर और इसे पूरी तरह से केंद्र में रखना चाहिए और यह कभी भी बड़ा नहीं होगा कि यह मूल आकार है।
यदि ये उपयोगकर्ता द्वारा अपलोड की गई छवियां हैं और आप उदाहरण के लिए PHP का उपयोग कर रहे हैं, तो getImageSize() का उपयोग करके छवि चौड़ाई पाएं और छवि टैग प्रोग्रामेटिक रूप से छवि में जोड़ें।
छवि स्वाभाविक रूप से आकार होना चाहिए। क्या आप छवि को चौड़ाई में सेट कर रहे हैं: 100 भी? –
नहीं। आप नहीं कर सकते। सीएसएस के लिए एक यादृच्छिक छवि के वास्तविक आकार को जानने का कोई तरीका नहीं है। छवि आकार का पता लगाने और छवि को स्केल करने के लिए आपको जावास्क्रिप्ट की आवश्यकता होगी। –