स्केलिंग ऑब्जेक्ट एलिमेंट ऊंचाई चौड़ाई के लिए आनुपातिक + सीएसएस

Question

के साथ निरंतर उच्च स्तर पर यह मुद्दा है: मेरे पास 16: 9 वीडियो के लिए एक फ्लैश वीडियो प्लेयर है। खिलाड़ी की कुल ऊंचाई वीडियो और कुछ नियंत्रणों द्वारा उठाई जाती है। समग्र खिलाड़ी की ऊंचाई के बावजूद नियंत्रण की ऊंचाई स्थिर है। तो मैं जो करना चाहता हूं उसके पास सीएसएस के साथ खिलाड़ी स्केल है ताकि ऊंचाई समीकरण को संतुष्ट करे: y = rx + C, जहां x चौड़ाई है, आर वीडियो की ऊंचाई का वीडियो चौड़ाई का अनुपात है, और सी स्थिर है नियंत्रण की ऊंचाई।

मैं कुछ है कि वेबकिट में काम करता है बाहर काम किया है, लेकिन प्रतीत होता है और कुछ नहीं:

#video-container { 
    height: 0px; 
    padding-bottom: 56%; /* proportional scaling */ 
    position:relative; 
    width: 100%; 
} 
#video-container object { 
    height: 100%; 
    padding-bottom: 50px; /* control height */ 
    position: absolute; 
    width: 100%; 
} 

वेबकिट में, Flash फिल्म खड़ी पैमाने पर नीचे गद्दी क्षेत्र को भरने के लिए होगा। हर दूसरे ब्राउज़र में, हालांकि, नीचे पैडिंग बस खाली जगह है।

क्या चौड़ाई के साथ आनुपातिक तत्व की ऊंचाई को स्केल करने के लिए सीएसएस-केवल समाधान है और कुछ स्थिर मूल्य है? एसओ पर आनुपातिक स्केलिंग से संबंधित बहुत सारे प्रश्न हैं, लेकिन निरंतर हिस्सा मुश्किल हिस्सा है।

Answer 1

Here is a fiddle that uses slightly different numbers, but is set up to illustrateheight के लिए "चौड़ाई के साथ आनुपातिक और कुछ स्थिर मूल्य" विचार। यह आपके मूल विचार पर आधारित है, एक चिमटा के साथ। यह IE8 +, क्रोम, फ़ायरफ़ॉक्स में ठीक परीक्षण करना प्रतीत होता था।

अनिवार्य रूप से, कोड आप की आवश्यकता होगी शायद यह है:

#video-container { 
    position:relative; 
    width: 100%; 
    height: 0px; 
    padding-bottom: 56%; /* proportional scaling */ 
    padding-top: 50px; /* add constant */ 
} 

#video-container object { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
}