IE6 में एक (CSS) आयाम का उपयोग करके छवि को स्केल करते समय पहलू अनुपात को कैसे संरक्षित करें?

Question

यहाँ समस्या है। मेरी एक छवि है:

<img alt="alttext" src="filename.jpg"/>

नोट कोई ऊँचाई या चौड़ाई निर्दिष्ट नहीं है।

कुछ पृष्ठों पर मैं केवल एक थंबनेल दिखाना चाहता हूं। मैं HTML को बदल नहीं सकता, इसलिए मैं निम्नलिखित सीएसएस का उपयोग करता हूं:

.blog_list div.postbody img { width:75px; }

जो (अधिकांश ब्राउज़रों में) समान रूप से विस्तृत थंबनेल का एक पेज बनाता है, सभी संरक्षित पहलू अनुपात के साथ।

IE6 में, हालांकि छवि को सीएसएस में निर्दिष्ट आयाम में ही बढ़ाया गया है। यह 'प्राकृतिक' ऊंचाई को बरकरार रखता है।

यहाँ उन पृष्ठों की एक जोड़ी का उदाहरण दिया गया है जो समस्या का वर्णन करते हैं:

• सूची, जिसमें थंबनेल दिखाना चाहिए
• एक एकल ब्लॉग पोस्ट, जो पूर्ण आकार की छवि दिखाता है।

मैं सभी सुझावों के लिए बहुत आभारी रहूंगा, लेकिन यह बताना चाहूंगा कि (चुने हुए ग्राहकों की सीमाओं के कारण) मैं कुछ ऐसा ढूंढ रहा हूं जिसमें html को संशोधित करना शामिल नहीं है। सीएसएस भी जावास्क्रिप्ट के लिए बेहतर होगा।

संपादित करें: उल्लेख करना चाहिए कि चित्र अलग-अलग आकार और पहलू अनुपात के हैं।

Comments

मैं विभिन्न बग का दस्तावेजीकरण कर रहा हूं। मैं इसे पुन: पेश नहीं कर सका। क्या आपको लगता है कि आप इसका एक साधारण परीक्षण कर सकते हैं?

— पदक विजेता

सच कहूँ तो, मैं किसी भी अधिक webdesign का एक बहुत कुछ नहीं करते हैं और मुझे यकीन नहीं है कि मुझे कुछ परेशान किए बिना IE6 स्थापना कहां मिल सकती है। मैं इसे विज्ञापित करूँगा।

— टॉम राइट

Answer 1

एडम लुटेर ने मुझे इसके लिए विचार दिया, लेकिन यह वास्तव में वास्तव में सरल था:

img {
  width:  75px;
  height: auto;
}

IE6 अब छवि को ठीक करता है और ऐसा लगता है कि सभी अन्य ब्राउज़र डिफ़ॉल्ट रूप से उपयोग करते हैं।

हालांकि दोनों जवाब के लिए धन्यवाद!

Comments

मैं भी उपयोग करने की सलाह दूंगा: "ऑब्जेक्ट-फिट: समाहित?" या "ऑब्जेक्ट-फिट: भरें;" अगर यह आपके लिए पर्याप्त नहीं है

— मैग्नस

@Magnus के अनुसार caniuse.com CSS3 वस्तु फिट किसी भी मौजूदा ब्राउज़र (लेखन के समय) द्वारा समर्थित नहीं है और केवल कभी ओपेरा द्वारा समर्थित किया गया। यह शायद ही IE6 में काम करने जा रहा है।

— रिचर्ड हैर

यह भी अन्य तरीके से काम करना चाहिए? (यानी, सेट ऊंचाई, ऑटो चौड़ाई?) कि पुराने IEs के साथ काम करेंगे?

— josinalvo

Answer 2

मुझे खुशी है कि मैंने काम किया है, इसलिए मुझे लगता है कि आपको IE6 पर स्पष्ट रूप से 'ऑटो' सेट करना था ताकि अन्य ब्राउज़रों की नकल की जा सके!

मुझे वास्तव में हाल ही में छवियों को स्केल करने के लिए एक और तकनीक मिली, फिर से पृष्ठभूमि के लिए डिज़ाइन किया गया। इस तकनीक में कुछ रोचक विशेषताएं हैं:

1. छवि पहलू अनुपात संरक्षित है
2. छवि का मूल आकार बनाए रखा जाता है (अर्थात, यह केवल बढ़ने को कभी नहीं सिकोड़ सकता है)

मार्कअप एक आवरण तत्व पर निर्भर करता है:

<div id="wrap"><img src="test.png" /></div>

ऊपर दिए गए मार्कअप को देखते हुए आप इन नियमों का उपयोग करें:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

यदि आप फिर रैपर के आकार को नियंत्रित करते हैं तो आपको दिलचस्प पैमाने पर प्रभाव मिलते हैं जो मैं ऊपर सूचीबद्ध करता हूं।

स्पष्ट होने के लिए, निम्नलिखित आधार स्थिति पर विचार करें: एक कंटेनर जो 100x100 और एक छवि 10x10 है। परिणाम 100x100 की स्केल की गई छवि है।

1. आधार स्थिति पर शुरू, कंटेनर 20x100 का आकार लेता है, छवि 100x100 पर आकार में रहती है।
2. आधार स्थिति पर शुरू, छवि को 10x20 में बदल दिया जाता है, छवि 100x200 के आकार की हो जाती है।

इसलिए, दूसरे शब्दों में, छवि हमेशा कम से कम कंटेनर जितनी बड़ी होती है, लेकिन पहलू अनुपात बनाए रखने के लिए इससे आगे बढ़ेगी ।

यह शायद आपकी साइट के लिए उपयोगी नहीं है, और यह IE6 में काम नहीं करता है। लेकिन, यह है आपके विचार बंदरगाह या कंटेनर के लिए एक छोटा पृष्ठभूमि प्राप्त करने के लिए उपयोगी है।

Comments

यदि आप किसी चित्र को संरक्षित पहलू-अनुपात के साथ एक कंटेनर में स्केल करना चाहते हैं, तो यह न्यूनतम ऊंचाई / मिनट-चौड़ाई के बजाय अधिकतम-ऊँचाई और अधिकतम-चौड़ाई वाला प्रतीत होता है, जो छोटी छवियों को स्केल करने के लिए दिखाई देते हैं।

— कर्स्टन

मुझे यह जवाब पसंद है और @Karsten अधिकतम ऊंचाई और अधिकतम-चौड़ाई के बारे में राइट है।

— रामशरण

Answer 3

खैर, मैं एक सीएसएस हैक के बारे में सोच सकता हूं जो इस मुद्दे को हल करेगा।

आप अपनी सीएसएस फ़ाइल में निम्न पंक्ति जोड़ सकते हैं:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

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

Answer 4

CSS में स्पष्ट स्केलिंग करने का एकमात्र तरीका ट्रिक्स का उपयोग करना है जैसे कि यहां पाया गया है ।

केवल IE6, आप फ़िल्टर का उपयोग भी कर सकते हैं ( PNGFix की जाँच करें ) )। लेकिन उन्हें स्वचालित रूप से पृष्ठ पर लागू करने के लिए जावास्क्रिप्ट की आवश्यकता होगी, हालांकि उस जावास्क्रिप्ट को सीएसएस फ़ाइल में एम्बेड किया जा सकता है।

यदि आपको जावास्क्रिप्ट की आवश्यकता होने जा रही है, तो आप चाहते हैं कि सामग्री लोड होने के बाद छवि का निरीक्षण करके ऊंचाई के लिए लापता मान में केवल जावास्क्रिप्ट भरना हो। (क्षमा करें, मेरे पास इस तकनीक का संदर्भ नहीं है)।

अंत में, और मुझे इस सोपबॉक्स के लिए क्षमा करें, आप इस मामले में IE6 समर्थन से बचना चाह सकते हैं। आप _width: autoअपने बाद जोड़ सकते हैंwidth: 75px नियम के , ताकि IE6 कम से कम छवि को यथोचित रूप से प्रस्तुत करे, भले ही वह गलत आकार हो।

मैं अंतिम समाधान की सिफारिश केवल इसलिए करता हूं क्योंकि IE6 बाहर के रास्ते पर है: 20% और लगभग एक महीने में लगभग नीचे जा रहा है । इसके अलावा, मैं ध्यान देता हूं कि आपकी साइट मनोरंजक और यूके में है। ये दोनों जनसांख्यिकीय झुकाव को IE6 से दूर रखने में मदद करते हैं: IE6 उपयोग सप्ताहांत के दौरान लगभग 40% गिरता है (कोई उद्धरण खेद नहीं), और यूके में IE6 जनसांख्यिकीय (फिर से कोई उद्धरण, खेद) कम नहीं है।

सौभाग्य!