वाडिन में किसी छवि घटक का आकार कैसे सेट करें और पहलू अनुपात

Question

रखें मेरे पास एक छवि घटक है जिसे मैं 500px द्वारा 500px के आकार को परिभाषित करना चाहता हूं। मेरी समस्या यह है कि मेरी छवि एक वर्ग नहीं है, लेकिन स्ट्रीम छवि में मेरे छवि घटक में धक्का देते समय मैं पहलू अनुपात रखना चाहता हूं। मैन्युअल रूप से छवि का आकार बदलने के अलावा मैं इसे और कैसे कर सकता हूं? दूसरे शब्दों में छवि घटक के भीतर कुछ ऐसा है जो मुझे बिना किसी स्क्वायर बनने के मजबूर किए बिना छवि को फिर से आकार देने की अनुमति देता है?

Answer 1

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

तो उदाहरण के लिए अगर मैं एक छवि है कि 800x600 है मैं तो आधार रेखा के रूप में 800 का उपयोग समझेंगे, जिसका अर्थ है 500/800 जिसका अर्थ है कि उस छवि यह के आकार के 62.5% तक कम हो गया है है। मैं 600 * 0.625 = 375 में 62.5% से 600 को कम करता हूं। इसलिए मैं अपनी छवि लाइब्रेरी का उपयोग करके 500x375 पर छवि का आकार बदलता हूं। और अगर छवि 600x800 थी तो मैं इसे 375x500 में बदल दूंगा। दूसरे शब्दों में, मैं छवि को पूर्व-संसाधित करता हूं और जीयूआई के भीतर किसी भी चीज़ पर भरोसा करता हूं ताकि यह मेरे लिए प्रबंधन कर सके।

Answer 2

मैंने इस समस्या में भाग लिया है। ब्राउज़र की पिक्सेल चौड़ाई के आधार पर छवि (छवियों) की ऊंचाई और चौड़ाई का आकार बदलने के लिए मुझे अपना तर्क बनाना पड़ा। मुझे विश्वास नहीं है कि वाडिन में बॉक्स से कुछ भी बाहर है जो इसे संभाल सकता है।

कुछ इस तरह:

if (browserWidth <= 1250){ 
     height = x; 
     width = x; 
    }else if (browserWidth <= 1500){ 
     height = x; 
     width = x; 
    }else if (browserWidth <= 1750){ 
     height = x; 
     width = x; 
    }else if (browserWidth <= 2000){ 
     height = x; 
     width = x; 
    }else { 
     height = x; 
     width = x; 
    } 

आशा है कि मदद करता है।

Answer 3

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

पहले अपनी mytheme.scss फ़ाइल संपादित करें और एक सीएसएस प्रविष्टि जोड़ें। इस

@mixin mytheme { 
    @include valo; 

    .maxSize500 { 
    max-width: 500px; 
    max-height: 500px; 
    } 

} 

कुछ ऐसा दिखाई देगा कोड उपयोग addStyleName के माध्यम से इस नियम लागू करते हैं और अपरिभाषित का आकार निर्धारित करने के लिए। पूर्व:

myImageComponent.setSizeUndefined(); // this line may not be needed in your project (it wasn't in mine) 
myImageComponent.addStyleName("maxSize500"); 

अब अपनी परियोजना को फिर से चलाएं, और आपको g2g होना चाहिए।

hths!