2013-03-21 3 views
7

में निरंतर आकार को बनाए रखने में मैं सीएसएस 3 स्केल ट्रांसफॉर्म का उपयोग कर एक div को स्केल करने के लिए उपयोग कर रहा हूं जिसमें अन्य divs शामिल हैं।सीएसएस 3 स्केल पैरेंट डिवीजन पर बदलता है लेकिन कुछ संबंधित divs

मेरी समस्या यह है कि आंतरिक आंतरिक divs में से कुछ को रखने की आवश्यकता है, मूल रूप से जैसे कि उन्हें स्केल नहीं किया गया था, उनके आकार को नहीं बदला जाना चाहिए, हालांकि मुझे माता-पिता div को अन्य सभी चीज़ों के साथ स्केल करने की आवश्यकता है ।

आप कुछ divs में स्केलिंग को कैसे उलट सकते हैं?
मैं एक व्यस्त स्केलिंग लागू करने की कोशिश कर रहा हूं।
यदि कुल div ने 1.5 का मान लागू किया था, तो मैं यह पता लगाने की कोशिश कर रहा हूं कि अब मुझे अन्य divs को स्केल करने के लिए क्या करना चाहिए ताकि वे उन्हें पहले कैसे देख सकें।

उत्तर

15

यदि माता-पिता को 1.5 के कारक द्वारा स्केल किया गया है, तो आपको अपने आकार को स्थिर रखने के लिए 1/1.5 = 0.(6) के कारक द्वारा बच्चों को स्केल करने की आवश्यकता है।

example

सामान्य तौर पर, आदेश चाइल्ड तत्व पैमाने को बदलने कि माता-पिता पर लागू किया गया है और a के पैमाने कारक है के लिए रद्द करने के लिए, आप लागू करने के लिए एक और पैमाने पर कारक 1/a के बदलने की जरूरत है बच्चे ही

आप या तो जरूरत के लिए:

  • गणना मैन्युअल पैमाने कारक इससे पहले कि आप कुछ और करने के लिए और फिर के रूप में यह अपने कोड (उदाहरण के ऊपर लिंक)
  • एक पूर्वप्रक्रमक का उपयोग के लिए इस संभाल करने में है इसका इस्तेमाल आप (SASS example)
  • उपयोग जावास्क्रिप्ट पैमाने कारक बच्चे पर पैमाने transform स्थापित करने के लिए बच्चे और के लिए आवश्यक गणना करने के लिए
+0

+1 और मुझे कहना है कि मैं आपकी प्रोफ़ाइल से जुड़े सीएसएस 3 डी डेमो को _love_ कहता हूं :-) – andyb

+1

या आप गणना करने के लिए calc() और -webkit-calc() का उपयोग कर सकते हैं = – Geuis

+0

@Geuis Yup, एक अच्छा विचार है। दुखद बात यह है कि समर्थन अच्छा नहीं है। केवल वर्क 37 या 38 के साथ शुरू होने वाला क्रोम है और ओपेरा स्पष्ट रूप से पीछे है, लेकिन यह फ़ायरफ़ॉक्स या आईई में काम नहीं करेगा। – Ana

1

किसी भी पैमाने आपरेशन के प्रतिलोम, 1/<scale> तो 1.5 द्वारा कंटेनर स्केलिंग द्वारा आप 1/1.5 = 0.6

दुर्भाग्य से बच्चों पैमाने पर करने की आवश्यकता होगी है विनिर्देश आप जैसे सीएसएस उपयोग नहीं कर सकते के अनुसार: के बाद से

transform: scale(1/1.5); 

के रूप में scale(<number>[, <number>])

जहां <number>

है पैमाने परिभाषित किया गया है 363,210

या तो एक या शून्य या अधिक दशमलव अंक एक बिंदु के बाद (।) एक या अधिक दशमलव अंक

द्वारा पीछा किया तो तुम गणना खुद करना होगा या LESS की तरह एक गतिशील स्टाइलशीट भाषा इस्तेमाल कर सकते हैं जो operations के इन प्रकारों का समर्थन करता है।

Demo (वेबकिट केवल)

0

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

+0

इस मुद्दे को हल करने के तरीके पर कोई विचार? – Shmiddty

संबंधित मुद्दे