रेल डिस्प्ले व्यू डिस्प्ले पर रीसाइजिंग?

Question

"260x180" कहने के लिए मैं मौजूदा छवि का आकार कैसे बदलूं?

मैं वर्तमान में अपने अमेज़ॅन एस 3 स्टोरेज बाल्टी में छवियों को अपलोड करने के लिए कैरियरवेव और रैमिक का उपयोग कर रहा हूं, और यह छवि के 2 संस्करण बनाता है: मूल, और अंगूठे संस्करण (70x70)।

अब, मुझे पता है कि मैं एक और संस्करण बना सकता हूं ताकि तीन संस्करण बनाए जाएंगे, जिसमें 260x180 भी शामिल है, लेकिन मुझे लगता है कि स्टोरेज डेटाबेस को खत्म कर रहा था, और मैं सोच रहा था कि क्या मैं इसे कर सकता हूं स्तर देखें।

मैं

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

कोशिश की, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है - छवियों समान आकार नहीं हैं।

इसके अलावा, अगर छवि मेरे वांछित आउटपुट से छोटी है, तो क्या मुझे छवियों की तुलना में कुछ अलग करने की ज़रूरत है? उदाहरण के लिए, क्या मुझे बड़े लोगों को काटने की ज़रूरत है, लेकिन छोटे लोगों का विस्तार करें, या यह स्वचालित रूप से वांछित आकार में स्केल करेगा?

Answer 1

तरह @Yosep ने कहा, रेल यहाँ पर जा के जादुई कुछ भी नहीं है। <%= image_tag %> परिणाम एचटीएमएल में <img> टैग उत्पन्न करता है। यदि आप एक :size => '260x180' गुजरती हैं, परिणाम <img> टैग 260 करने के लिए अपने width और height सेट करना होगा और 180

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

<img> टैग की चौड़ाई और ऊंचाई को सेट करके छवि का आकार बदलना छवि के मूल पहलू अनुपात को नहीं रखेगा। यदि मूल अनुपात 260: 180 है, तो यह ठीक है। लेकिन यदि नहीं, तो परिणाम बदसूरत होगा। इसके अलावा, ऐसा करने में एक और कमी है, यही कारण है कि आपको सीएसएस का उपयोग करके छवि का आकार बदलना नहीं चाहिए। क्लाइंट साइड पर बड़ी छवियों को छोटे आकार में बदलना अंततः आपके नेटवर्क का एक बड़ा अपशिष्ट होगा, और ऐसा करने से आपकी साइट की प्रतिपादन धीमी हो जाएगी। यह वाईएसलो के नियमों में से एक है।

सीएसएस का उपयोग करके छवि का आकार बदलने के लिए, आप max-width और max-height का उपयोग कर सकते हैं, तदनुसार बड़ी छवियों का आकार बदल दिया जाएगा, छोटे आकार का आकार नहीं बदला जाएगा।

Answer 2

एक दृश्य में, एक नई छवि को संसाधित किए बिना? सम्मेलन से, आप सीएसएस का उपयोग करेंगे।

.image_container img { 
    width: 260px; 
    height: 180px 
} 

और यहाँ सीएसएस के साथ काट-छांट करने में कुछ रोचक तरीके हैं: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Answer 3

सभी रेल करता है, जब अपने कोड को देखने,

<image tag="image.jpg" width="260" height="190" ../> 

की तरह कुछ में

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

चालू करने के लिए है पृष्ठ पर (

पृष्ठ (एचटीएमएल)।

यही कारण है, ने कहा कि यदि आपका कोड यह की तरह नहीं दिखता, काम कर रहा है इसे करने के लिए एक CSS वर्ग आवंटित करने के लिए प्रयास करें:

.image-size { 
    max-width: 300px; 
    max-height: 200px; 
} 

Answer 4

यदि आप चाहते हैं कि आप क्लाउड में हमारी स्वचालित छवि का आकार बदल सकते हैं।उदाहरण के लिए, निम्न आदेश 260x180 आयताकार भरने के लिए छवि का आकार बदल देगा।

<%= cl_image_tag("my_image.png", :size => "260x180", :crop => :fill) %> 

यह blog post का वर्णन करता है CarrierWave उपयोग करने के लिए कैसे, जबकि सभी छवियों, बादल में जमा हो जाती है एक तेजी से CDN के माध्यम से दिया और सभी परिवर्तनों को गतिशील बादल (RMagick स्थापित करने की आवश्यकता) में किया जाता है।