एचटीएमएल/सीएसएस ज़ूमिंग

Question

एचटीएमएल तत्वों को ज़ूम करने में कुछ कठिनाइयों का सामना करना पड़ रहा है। , ड्रॉप डाउन से

http://jsfiddle.net/92wHQ/4/

150% का चयन करें: एफएफ या क्रोम में, कम से (बहुत, बहुत ही सरल, छोटे कोड) एक बार देख ले। काले और सफेद ढाल बॉक्स अपने मूल आकार का 150% तक स्केल करेगा। अब यह स्केल किया गया है, ध्यान दें कि क्षैतिज स्क्रॉल बार प्रकट होता है और लंबवत स्क्रॉल बार नई, बड़ी, स्केल की गई ऊंचाई और चौड़ाई को समायोजित करने के लिए फैलता है।

अब 150% से 50% तक स्विच करें। ढाल बॉक्स वास्तव में 50% तक स्केल करता है, लेकिन ध्यान दें कि (लंबवत) स्क्रॉल बार नई, छोटी, स्केल की गई ऊंचाई को समायोजित करने के लिए अनुबंध नहीं करता है। इसके बजाय, ढाल बॉक्स के नीचे खाली सफेद जगह का एक गुच्छा है।

ब्राउज़र 100% से अधिक स्केलिंग के लिए स्क्रॉल बार को रीफ्रेश कैसे करते हैं, लेकिन 100% से कम नहीं? 100% से कम के साथ मैं 100% से कम के लिए एक ही व्यवहार कैसे प्राप्त कर सकता हूं? मुझे यह सफेद जगह नहीं चाहिए।

स्केलिंग केवल ढाल बॉक्स को प्रभावित करता है, लेकिन नहीं कंटेनर div जो इसके अंदर है:

Answer 1

मैं क्या हो रहा है में कुछ जानकारी है। तो जब आप बॉक्स को 150% तक स्केल करते हैं, तो बॉक्स अब कंटेनर div के आकार के मुकाबले तुलनात्मक रूप से बड़ा होता है (कंटेनर div हमेशा 496x250 होता है), इसलिए यह स्क्रॉलबार रखता है।

दूसरी तरफ, जब आप इसे छोटा करते हैं, तो ढाल बॉक्स इसके अंदर कंटेनर div से छोटा होता है, इसलिए स्क्रॉलबार की आवश्यकता नहीं होती है।

इसे संभालने के कुछ अलग तरीके हो सकते हैं। मुख्य मुद्दा यह है कि आप कंटेनर div के आकार बदलने/स्केलिंग को संभालने में काम नहीं कर रहे हैं।

Answer 2

पहेली में कुछ संशोधित किया गया। जाँच करें अगर यह तुम क्या इच्छा है:

http://jsfiddle.net/92wHQ/7/

तो स्क्रॉलबार वास्तव में 100% आयाम और अधिक से अधिक पर आधारित हैं। ध्यान दें कि 100% स्क्रॉलबार और 50% स्क्रॉलबार में एक ही "आकार" होता है जबकि 150% करना एकमात्र समय होता है जब यह छोटा हो जाता है।