उपयोग सीएसएस (और शायद जावास्क्रिप्ट) एक तत्व वर्ग हो बनाने के (या एक विशिष्ट पहलू अनुपात बनाए रखने के)

Question

मैं एक div कि मैं निम्नलिखित विशेषताएं हैं करना चाहते हैं के लिए:

• चौड़ाई = 50 उसकी पेरेंट% तत्व
• एक निश्चित पहलू अनुपात को बनाए रखने के लिए जो कुछ भी होना चाहिए उसके बराबर ऊंचाई।

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

मुझे नहीं लगता कि ऐसा करने के लिए शुद्ध सीएसएस का उपयोग करने का कोई तरीका है, लेकिन क्या किसी को इस तरह से पता है? वैकल्पिक रूप से, क्या ऐसा करने के लिए एक आसान जावास्क्रिप्ट तरीका है? (JQuery ठीक है।)

Answer 1

मैं पता लगा कि कैसे js बिना ऐसा करने के लिए, हालांकि आप एक पारदर्शी छवि का उपयोग करने की जरूरत है।

<div class="rect_container"><img class="rect_image" src="rect_image.png"/> 
<div class="rect">Your favorite content here</div> 
</div> 

rect_image के लिए एक axb पारदर्शी PNG का उपयोग करें जहां axb पहलू अनुपात है:

की तरह एक एचटीएमएल संरचना सेट करें।

.rect_container {width: 50%; position: relative;} 
.rect_image {width: 100%; display: block;} 
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;} 

यहां महत्वपूर्ण बात यह तथ्य का लाभ ले जा रहा है कि छवियों उनके पक्ष अनुपात बनाए रखना जब एक ही दिशा में आकार दिया:

इस बीच जैसे एक स्टाइलशीट की स्थापना की। इस बीच, हमें एक उपयोग योग्य div की आवश्यकता है, इसलिए हम छवि को ब्लॉक के रूप में प्रदर्शित करते हैं, इसे एक div में लपेटते हैं, और उसके अंदर एक बिल्कुल स्थित div डाल देते हैं। मैंने वास्तव में परीक्षण किए गए कुछ और जटिल से इस कोड को आसवित किया। एक जादू की तरह काम करता है।

Answer 2

यहां आप जाएं: Detecting a browser resize using JQuery।

Answer 3

jQuery बहुत आसान लगता है। सीएसएस में 50% चौड़ाई सेट करें, और उसके बाद निम्न:

function onResize() { 
    var el = $('#element'); 
    el.height(el.width()); 
} 
$(window).resize(onResize); 
$(document).ready(onResize); 

Answer 4

यहाँ कोई img टैग के साथ एक शुद्ध सीएसएस संस्करण है:

<div class="apple_container"><div class="apple_icon"></div></div> 

एससीएसएस (शामिल कम्पास पृष्ठभूमि आकार रेंडर करने के लिए):

.apple_container { 
    width: 50%; 
} 
.apple_icon { 
    padding-bottom: 100%; 
    background-image: url(/images/apple.png); 
    background-repeat: no-repeat; 
    @include background-size(contain); 
    background-position: center center; 
} 

सीएसएस ऊपर से उत्पन्न:

.apple_container { 
    width: 50%; 
} 
.apple_icon { 
    padding-bottom: 100%; 
    background-image: url(/images/apple.png); 
    background-repeat: no-repeat; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    background-position: center center; 
} 

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