क्लाइंट पर चित्रों के कोनों की वास्तविक गोलाई

Html लेआउट में कोनों को गोल करने के बारे में इतना कुछ कहा गया है कि मैं उन लोगों को समझता हूं, जो हेडलाइन पढ़ते हैं, विडंबना से मुस्कुराते हैं और सोचते हैं "फिर से 25, जितना संभव हो ..."। इसलिए, मैं सार को संक्षेप में प्रस्तुत करने की कोशिश करूंगा, और तुरंत चेतावनी दी कि आप शायद ही इस विधि को पहले देख सकते थे।

कार्य

संक्षेप में, कार्य एक निश्चित पृष्ठभूमि के लिए और एक निश्चित फ्रेम के साथ कोनों की गोलाई का अनुकरण करना नहीं था, लेकिन किसी भी फ्रेम और त्रिज्या को निर्दिष्ट करने की क्षमता के साथ, छवि के कोनों की एक वास्तविक गोलाई का एहसास करना, पृष्ठभूमि और चित्र के आकार की परवाह किए बिना। बेशक यह IE6 सहित सभी ब्राउज़रों में काम करना चाहिए।

निर्णय प्रक्रिया

ठीक है, पहली नज़र में कार्य केवल अवास्तविक है और बहुत लंबे समय तक मैंने इसे हल करने की कोशिश भी नहीं की, प्रत्येक बार एक निश्चित त्रिज्या के कोनों को एक विशिष्ट पृष्ठभूमि के कोनों को काटकर उन्हें चित्र के शीर्ष पर रखना। लेकिन एक बार, मैंने लेआउट के क्षेत्र में सभी दृढ़ता और अपने सभी ज्ञान के साथ इस मुद्दे से गंभीरता से निपटने का फैसला किया।



मैंने यह कहकर शुरू किया कि "ईमानदारी से" एक आयताकार तस्वीर को गोल करें, कोनों को बाहर कर दें, केवल CSS3- संपत्ति सीमा-त्रिज्या हो सकती है, जब तक हम यह नहीं भूल जाते कि यह IE6-8 में समर्थित नहीं है।



और इसलिए, एक अज्ञात आकार का चित्र लें और उस पर सीमा-त्रिज्या लगाएँ:



HTML:

< img class ="b-img-radius" src ="i/tmp/1.jpg" />



* This source code was highlighted with Source Code Highlighter .

सीएसएस:

/* IMG radius */



.b-img-radius {

border: 1px solid #000;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}



/* ----------- */



* This source code was highlighted with Source Code Highlighter .

हमें मिलता है:







ऐसा नहीं है कि क्या जरूरत है, फ्रेम अपना जीवन, अपनी छवि बनाता है। आइए इसे अलग तरीके से आज़माएं, इनलाइन-ब्लॉक एलिमेंट की पृष्ठभूमि पर चित्र को लगाएं, लेकिन आपको इसके लिए चित्र का आकार निर्धारित करना होगा।



HTML:

< div class ="b-img-radius" style ="background: url(i/tmp/1.jpg); width: 250px; height: 167px" ></ div >



* This source code was highlighted with Source Code Highlighter .

सीएसएस समान है।



हमें मिलता है:







यह बेहतर है, गोलाई काम करता है, लेकिन मैं आकारों को बिल्कुल भी निर्दिष्ट नहीं करना चाहता हूं, इसलिए हम अपने इनलाइन-ब्लॉक तत्व के अंदर आकारों को निर्दिष्ट किए बिना एक ही चित्र सम्मिलित करते हैं और इसे दृश्यता के माध्यम से छिपाते हैं: छिपा हुआ; इसलिए वह वांछित आकार में पृष्ठभूमि के साथ हमारे ब्लॉक को तोड़ देगा।



HTML:

< div class ="b-img-radius" style ="background: url(i/tmp/1.jpg)" >< img src ="i/tmp/1.jpg" /></ div >



* This source code was highlighted with Source Code Highlighter .

सीएसएस:

/* IMG radius */



.b-img-radius {

zoom: 1;

position: relative;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

display: inline-block;

vertical-align: top;

}



.b-img-radius img {

display: block;

visibility: hidden;

}



/* ----------- */



* This source code was highlighted with Source Code Highlighter .

पहली नज़र में, यह चित्र को पथ को डुप्लिकेट करने के लिए बदसूरत है, लेकिन मुझे लगता है कि यह इसके लायक है, खासकर जब से यह तत्व सार्वभौमिक है, इसे आपकी परियोजना में एक अलग नियंत्रण / सहायक में लिया जा सकता है और कोड सुंदर हो जाएगा।

लेकिन IE के बारे में क्या?

भोज के मुद्दे पर सब कुछ सरल है। एक बहुत शक्तिशाली CSS3 पाई लाइब्रेरी है जो वीएमएल पर IE6-8 के लिए कई CSS3 गुणों को लागू करता है, जिसमें सीमा-त्रिज्या भी शामिल है, यह अविश्वसनीय रूप से सरल है और इसका वजन केवल 28kb है। बस हमें सीएसएस में एक पंक्ति जोड़ने की जरूरत है:

/* IMG radius */

.b-img-radius {

.......



behavior: url(css/PIE.htc);

}



* This source code was highlighted with Source Code Highlighter .

IE6 आसानी से इसका सामना करता है और पृष्ठ पर 10 से अधिक ऐसे तत्व होने पर भी धीमा नहीं होता है। लेकिन मुख्य बात यह है कि वीएमएल ऑब्जेक्ट्स को जोड़ने से तस्वीर की क्लिक करने की क्षमता प्रभावित नहीं होती है। उदाहरण के लिए, हम इसे div के स्थान पर केवल एक लिंक बना सकते हैं:



HTML:

< a href ="#" class ="b-img-radius" style ="background: url(i/tmp/1.jpg); width: 250px; height: 167px" >< img src ="i/tmp/1.jpg" /></ a >



* This source code was highlighted with Source Code Highlighter .

परिणाम

नतीजतन, हमें वह मिला जो हम चाहते थे, तत्व एक सामान्य तस्वीर की तरह इनलाइन रहता है, उन आयामों को निर्दिष्ट करने की आवश्यकता नहीं होती है जो चित्र स्वयं ही उतनी ही जगह ले लेंगे, हम लचीले ढंग से कोनों के गोलाई के त्रिज्या को बदल सकते हैं, सीएसएस के माध्यम से किसी भी आकार और रंग का एक फ्रेम सेट कर सकते हैं, और सबसे महत्वपूर्ण रूप से नहीं। इस बारे में सोचें कि तस्वीर किस तरह की पृष्ठभूमि पर टिकी हुई है, और यह भी, ध्यान (!), आप बॉक्स-छाया के माध्यम से एक छाया सेट कर सकते हैं, जो IE6 ++ में भी काम करेगा!



अंतिम उदाहरण , ( मिरर 1 )



क्रॉस-ब्राउज़र संगतता: IE6 ++ और एफएफ, ओपेरा, क्रोम, सफारी के सभी आधुनिक संस्करण।



यह घटक उन लोगों के लिए आदर्श है जो स्वतंत्र ब्लॉक बनाते हैं, इसे अपनी किट में जोड़कर, आप अपने जीवन को सरल बनाते हैं।



मुझे आपके किसी भी प्रश्न, सहकर्मियों के उत्तर देने में खुशी होगी।