खिड़की में फिट करने के लिए एक div स्केल करें लेकिन पहलू अनुपात

Question

ब्राउज़र दृश्य पोर्ट के अंदर फिट करने के लिए मैं div को स्केल कैसे कर सकता हूं लेकिन div के पहलू अनुपात को संरक्षित करता हूं। मैं सीएसएस और/या JQuery का उपयोग करके यह कैसे कर सकता हूं?

धन्यवाद!

Answer 1

यह JQuery और कुछ गणित के साथ संभव है।

दृश्य पोर्ट्स चौड़ाई और ऊंचाई के साथ-साथ divs वर्तमान आयाम प्राप्त करने के लिए JQuery का उपयोग करें।

$(document).width(); 

divs वर्तमान पहलू अनुपात की गणना करें। उदाहरण के लिए चौड़ाई/ऊंचाई

आपको चौड़ाई या ऊंचाई को पहले सेट करने के लिए निर्धारित करने के लिए थोड़ा तर्क की आवश्यकता है, फिर दूसरी तरफ की गणना करने के लिए प्रारंभिक अनुपात का उपयोग करें।

Answer 2

jQuery में एक प्लगइन है जो एक ऑब्जेक्ट बढ़ाता है जब तक कि इसके पक्ष में से कोई एक निश्चित पीएक्स-वैल्यू तक नहीं पहुंच जाता। यह जोड़ना व्यूपोर्ट की ऊंचाई होगी, आप किसी भी तत्व को उस आकार में विस्तारित कर सकते हैं: jQuery MaxSide।

Answer 3

गणित और तर्क की संरचना के तरीके पर टिप के लिए जियोफ़ के लिए धन्यवाद।

var height = originalHeight; 
var width = originalWidth; 
aspect = width/height; 

if($(window).height() < $(window).width()) { 
    var resizedHeight = $(window).height(); 
    var resizedWidth = resizedHeight * aspect; 
} 

else { // screen width is smaller than height (mobile, etc) 
    var resizedWidth = $(window).width(); 
    var resizedHeight = resizedWidth/aspect;  
} 

यह लैपटॉप और मोबाइल स्क्रीन आकारों पर मेरे लिए अच्छी तरह से काम कर रहा है अभी: यहाँ मेरी jQuery कार्यान्वयन, जो मैं आकार करने के लिए एक लाइटबॉक्स उपयोग कर रहा हूँ तो यह खिड़की भरता है।

Answer 4

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

एक पैडिंग-टॉप प्रतिशत समेत ब्लॉक चौड़ाई के सापेक्ष व्याख्या किया गया है। इसे स्थिति के साथ संयोजित करें: एक बच्चे तत्व पर पूर्ण, और आप एक बॉक्स में बहुत कुछ डाल सकते हैं जो इसके पहलू अनुपात को बरकरार रखता है।

HTML:

<div class="aspectwrapper"> 
    <div class="content"> 
    </div> 
</div> 

सीएसएस:

.aspectwrapper { 
    display: inline-block; /* shrink to fit */ 
    width: 100%;   /* whatever width you like */ 
    position: relative; /* so .content can use position: absolute */ 
} 
.aspectwrapper::after { 
    padding-top: 56.25%; /* percentage of containing block _width_ */ 
    display: block; 
    content: ''; 
} 
.content { 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */ 
    outline: thin dashed green;   /* just so you can see the box */ 
} 

display: inline-block.aspectwrapper बॉक्स के नीचे बढ़त के नीचे एक छोटे अतिरिक्त स्थान छोड़ देता है, तो यह नीचे एक और तत्व इसके खिलाफ फ्लश नहीं चलेंगे । display: block का उपयोग करना इससे छुटकारा पा जाएगा।

टिप के लिए this post पर धन्यवाद!

---

एक और दृष्टिकोण इस तथ्य पर निर्भर करता है कि ब्राउज़र छवि की पहलू अनुपात का सम्मान करते हैं जब आप केवल इसकी चौड़ाई या ऊंचाई का आकार बदलते हैं।

<div class="aspectwrapper"> 
    <img class="aspectspacer" src="http://chart.googleapis.com/chart?cht=p3&chs=160x90" /> 
    <div class="content"> 
    </div> 
</div> 

सीएसएस:

.aspectwrapper { 
    width: 100%; 
    position: relative; 
} 
.aspectspacer { 
    width: 100%; /* let the enlarged image height push .aspectwrapper's bottom edge */ 
} 
.content { 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; 
    outline: thin dashed green; 
}