CSS
झांकियों के लिए आकार
खोज…
वाक्य - विन्यास
आकार-बाहर: कोई नहीं | [<मूल-आकृति> || <आकार-बॉक्स>] | <छवि>
आकार-मार्जिन: <लंबाई> | <प्रतिशत>
आकार-छवि-दहलीज: <संख्या>
पैरामीटर
पैरामीटर | विवरण |
---|---|
कोई नहीं | मूल्य का none मतलब none है कि फ्लोट क्षेत्र (एक फ्लोट तत्व के चारों ओर सामग्री लपेटने के लिए उपयोग किया जाने वाला क्षेत्र) अप्रभावित है। यह डिफ़ॉल्ट / प्रारंभिक मान है। |
बुनियादी आकार | inset() , circle() , ellipse() या polygon() बीच एक को संदर्भित करता है। इन कार्यों और इसके मूल्यों में से एक का उपयोग करके आकृति को परिभाषित किया गया है। |
आकार बॉक्स | margin-box , border-box , padding-box , content-box बीच एक को संदर्भित करता है। जब केवल <आकार बॉक्स> प्रदान की जाती है (<बुनियादी आकार> बिना) इस बॉक्स आकार है। जब इसका उपयोग <आधार-आकार> के साथ किया जाता है, तो यह संदर्भ बॉक्स के रूप में कार्य करता है। |
छवि | जब एक छवि को मूल्य के रूप में प्रदान किया जाता है, तो आकार निर्दिष्ट छवि के अल्फा चैनल के आधार पर गणना की जाती है। |
टिप्पणियों
सीएसएस आकार मॉड्यूल के लिए ब्राउज़र समर्थन इस समय बहुत सीमित है।
यह ब्राउज़र / विक्रेता उपसर्गों के बिना क्रोम v37 + और ओपेरा 24+ में समर्थित है। सफारी इसे v7.1 + से समर्थन करती है, लेकिन -webkit-
उपसर्ग के साथ।
यह IE, एज और फ़ायरफ़ॉक्स में अभी तक समर्थित नहीं है।
बेसिक शेप के साथ आउटसाइड - सर्कल ()
shape-outside
सीएसएस संपत्ति के साथ एक फ्लोट क्षेत्र के लिए आकार मूल्यों को परिभाषित कर सकता है ताकि इनलाइन सामग्री फ्लोट के बॉक्स के बजाय आकार के चारों ओर लपेटे।
सीएसएस
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
एचटीएमएल
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
उपरोक्त उदाहरण में, दोनों चित्र वास्तव में वर्गाकार चित्र हैं और जब पाठ को shape-outside
संपत्ति के बिना रखा जाता है, तो यह दोनों तरफ के घेरे में नहीं बहेगा। यह केवल छवि के बॉक्स वाले बॉक्स के चारों ओर बहेगा। shape-outside
के साथ फ्लोट क्षेत्र को एक सर्कल के रूप में फिर से परिभाषित किया जाता है और सामग्री को इस काल्पनिक सर्कल के चारों ओर प्रवाहित किया जाता है जो shape-outside
का उपयोग करके बनाया जाता है।
फ्लोट क्षेत्र को फिर से परिभाषित करने के लिए उपयोग किया जाने वाला काल्पनिक चक्र छवि के संदर्भ बॉक्स के मध्य-मध्य बिंदु से खींची गई 80px की त्रिज्या वाला एक चक्र है।
नीचे स्क्रीनशॉट के एक जोड़े को यह वर्णन किया गया है कि जब shape-outside
का उपयोग किया जाता है और जब इसका उपयोग नहीं किया जाता है तो सामग्री को कैसे लपेटा जाएगा।
shape-outside
साथ आउटपुट
shape-outside
बिना आउटपुट
आकार का मार्जिन
shape-margin
सीएसएस सीएसएस गुण shape-outside
लिए एक मार्जिन जोड़ता है।
सीएसएस
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
एचटीएमएल
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
इस उदाहरण में, एक 10px मार्जिन आकार का उपयोग करते हुए चारों ओर जोड़ा जाता है shape-margin
। यह काल्पनिक सर्कल के बीच थोड़ा अधिक स्थान बनाता है जो फ्लोट क्षेत्र और आसपास बहने वाली वास्तविक सामग्री को परिभाषित करता है।
आउटपुट: