आकार परिवर्तन - सीएसएस-ट्रिक्स

resizeसंपत्ति नियंत्रण करता है, तो और कैसे एक तत्व पर क्लिक करके और तत्व के नीचे दाईं ओर खींचकर उपयोगकर्ता द्वारा आकार दिया जा सकता।

.module ( resize: both; )

यह जानना महत्वपूर्ण है: resize जब तक कि overflowसंपत्ति को किसी अन्य चीज के लिए सेट नहीं किया जाता है visible, जो कि अधिकांश तत्वों के लिए इसका प्रारंभिक मूल्य है।

यह भी जानने योग्य है कि फ़ायरफ़ॉक्स आपको मूल आकार से छोटे तत्व का आकार बदलने देगा। वेबकिट ब्राउज़र आपको इसे छोटा करने के लिए एक तत्व का आकार बदलने नहीं देगा, केवल बड़ा (दोनों आयामों में)।

मूल्यों

• none: तत्व रेसिजेबल नहीं है। यह अधिकांश तत्वों का प्रारंभिक मूल्य है। textareaतत्व सबसे आम है अपवाद में कई ब्राउज़रों उसके डिफ़ॉल्ट resizeमान है both।
• both: उपयोगकर्ता तत्व की ऊंचाई और / या चौड़ाई का आकार बदल सकता है।
• horizontal: उपयोगकर्ता क्षैतिज (चौड़ाई को बढ़ाते हुए) तत्व का आकार बदल सकता है।
• vertical: उपयोगकर्ता लंबवत (ऊंचाई को बढ़ाते हुए) तत्व का आकार बदल सकता है।
• inherit: तत्व अपने माता-पिता के आकार का मूल्य प्राप्त करता है।

जब कोई तत्व रहने योग्य होता है, तो उसके निचले कोने पर थोड़ा यूआई हैंडल होता है। पृष्ठ पर (बाएं से दाएं) पर directionसेट होने ltrपर और बाएं rtl(दाएं से बाएं) पृष्ठों पर हैंडल दाईं ओर पृष्ठ तत्वों पर दिखाई देता है ।

डेमो

इस डेमो में रेजिजेबल एलिमेंट एक पैराग्राफ है। विभिन्न resizeमूल्यों को आज़माने के लिए बटन पर क्लिक करें ।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन का आकार बदलें डेमो देखें।

सम्बंधित

• overflow
• direction

अधिक जानकारी

• कल्पना
• मोज़िला डॉक्स
• डेविड वाल्श का लेख
• टेकरिया ट्रिक्स

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४	4 *	नहीं न	। ९	४

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	नहीं न