दिलचस्प पोस्ट
एकाधिक कॉलम पर MySQL में प्रश्नों की तरह चयन कैसे करें? डेटा फ़्रेम में समूहिंग वैरिएबल के भीतर पहली और अंतिम पंक्ति का चयन कैसे करें? कैसे एक jtable सेल में लाइनों लपेटें? समूह द्वारा हाल ही में गैर- NA के साथ अनुपस्थित मूल्य (एनए) बदलें EntitySet को अपडेट करने में असमर्थ – क्योंकि इसमें एक परिभाषा है और कोई भी <UpdateFunction> तत्व मौजूद नहीं है int main () बनाम void main () सी में सी कोड से आप पायथन कोड कैसे कॉल करते हैं? सीमके: सीमके द्वारा उत्पन्न परियोजना में कॉन्फिगरेशन के आधार पर दृश्य स्टूडियो और एक्सकोड एक्सक्लेबल्स का नाम बदलना jquery लाइव मंडराना उसी ऑब्जेक्ट में जावास्क्रिप्ट ऑब्जेक्ट लाइटल वैल्यू एक्सेस करें JQuery फ़ुलकालेरर में अतिव्यापी घटनाओं को रोकने का कोई तरीका है? इंटरनेट एक्सप्लोरर में addEventListener मैं jQuery के किसी टैग को स्वचालित रूप से बंद करने के लिए कैसे संलग्न कर सकता हूं? क्या पृष्ठ का मेटा-टैग बदलने के लिए जावास्क्रिप्ट का उपयोग करना संभव है? कैसे प्रत्येक के लिए हैशप?

ऊंचाई के अनुसार डिवा पक्ष अनुपात बनाए रखें

मुझे इसकी ऊंचाई के प्रतिशत के रूप में एक तत्व की चौड़ाई को बनाए रखने की आवश्यकता है I इसलिए जब ऊंचाई में परिवर्तन होता है, तो चौड़ाई अपडेट हो जाती है।

पैडिंग-टॉप के लिए% मान का उपयोग करके विपरीत प्राप्त किया जा सकता है, लेकिन प्रतिशत के रूप में पैडिंग-बाएं एक वस्तु की चौड़ाई का प्रतिशत होगा, इसकी ऊँचाई नहीं।

तो इस तरह मार्कअप के साथ:

<div class="box"> <div class="inner"></div> </div> 

मैं इस तरह से कुछ का उपयोग करना चाहूंगा:

 .box { position: absolute; margin-top: 50%; bottom: 0; } .inner { padding-left: 200%; } 

यह सुनिश्चित करने के लिए कि बॉक्स का पहलू अनुपात इसकी ऊंचाई के अनुसार बनाए रखा जाता है ऊँचाई द्रव की वजह से% मार्जिन की वजह से होती है – जैसे कि खिड़की की ऊँचाई बदलती है, बॉक्स की ऊंचाई भी होगी

मुझे पता है कि जावास्क्रिप्ट के साथ इसे कैसे प्राप्त करना है, बस सोच रहा है कि क्या एक साफ सीएसएस-केवल समाधान है?

Solutions Collecting From Web of "ऊंचाई के अनुसार डिवा पक्ष अनुपात बनाए रखें"

आप एक ऐसी छवि का उपयोग कर सकते हैं, जिसमें आनुपातिक आकार के साथ वांछित अनुपात भी हो सकते हैं (छवियों को एक मूल्य निर्धारित करने के लिए आनुपातिक रूप से बढ़ाया जा सकता है और दूसरे को ऑटो के लिए)। छवि दिखाई नहीं देनी है, लेकिन इसे स्थान पर कब्जा करना होगा

 .box { position: absolute; bottom: 0; left: 0; height: 50%; } .size-helper { display: block; width: auto; height: 100%; } .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 153, .8); } 
 <div class="box"> <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100"> <div class="inner"> 1. box has fluid height<br> 2. img has 2:1 aspect ratio, 100% height, auto width, static position<br> 2.1 it thus maintains width = 200% of height<br> 2.2 it defines the dimensions of the box<br> 3. inner expands as much as box </div> </div> 

आप अपने तत्व की ऊँचाई और चौड़ाई दोनों के लिए वीएच इकाइयों का उपयोग कर सकते हैं ताकि वे दोनों व्यूपोर्ट की ऊंचाई के अनुसार बदल सकें।

व्यूपोर्ट की ऊंचाई का vh / 1 100 ( एमडीएन )

डेमो

 .box { position: absolute; height:50vh; width:100vh; bottom: 0; background:teal; } 
 <div class="box"></div> 

आपके द्वारा लिखित सीएसएस चाल, एक तत्व पर अनुपात width / height रखने के लिए बहुत अच्छी तरह से काम करता है। यह padding प्रॉपर्टी पर आधारित है, जब इसकी वैल्यू प्रतिशत में है, पेरेंट चौड़ाई के लिए आनुपातिक है, यहां तक ​​कि padding-top और padding-bottom

कोई सीएसएस प्रॉपर्टी नहीं है जो पेरेंट ऊंचाई तक आनुपातिक रूप से एक क्षैतिज आकार का सेट कर सकती है इसलिए मुझे लगता है कि कोई साफ सीएसएस समाधान नहीं है।

मुझे शुद्ध सीएसएस समाधान नहीं मिल रहा है यहां सीएसएस तत्व क्वेरीज़ जावास्क्रिप्ट लाइब्रेरी का उपयोग कर एक समाधान है।

 var aspectRatio = 16/9; var element = document.querySelector('.center'); function update() { element.style.width = (element.clientHeight * aspectRatio) + 'px'; } new ResizeSensor(element, update); update(); 

कोडपेन डेमो!