2012-06-18 9 views
9

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

तो मेरी उदाहरण में, मैं एक <div> 460px का एक सेट चौड़ाई और 280px का एक सेट ऊंचाई के साथ था, और मैं खींच (अपने पहलू अनुपात को बनाए रखने) के बिना उस क्षेत्र में फिट करने के लिए छवि, जो अपने आप के सभी की जरूरत है

+0

मैं बात इस तरह की संभाल करने के लिए एक jQuery प्लगइन लिखा है, शायद यह मदद मिलेगी: http://stackoverflow.com/questions/ 18838 9 63/आनुपातिक-पैमाने पर-iframe-to-fit-in-a-div-use-jquery/25222380 # 25222380 –

उत्तर

27

अब कुछ चौड़ाई उदाहरण के साथ लगभग नगण्य के बाद मेरे क्लासिक बीजगणित कौशल बदले में में लात मारी।

अगर मैं चौड़ाई ले लिया और ऊंचाई से यह विभाजित इस मामले में ऐसा है, तो, 460/280 आप 1.642 मिलता है ... जो उस क्षेत्र का पहलू अनुपात है, अब अगर मैंने छवि के पहलू अनुपात को देखा, तो मुझे पता था कि अगर यह 1.642 से अधिक था ... जिसका मतलब है कि यह क्षेत्र से बड़ा था, और यदि छवि का पहलू अनुपात कम था इससे, यह लंबा था।

तो मैं

// Set the Image in question 
$image = 'img/gif/b47rz.gif'; 

// Set the width of the area and height of the area 
$inputwidth = 460; 
$inputheight = 280; 

// Get the width and height of the Image 
list($width,$height) = getimagesize($image); 

// So then if the image is wider rather than taller, set the width and figure out the height 
if (($width/$height) > ($inputwidth/$inputheight)) { 
      $outputwidth = $inputwidth; 
      $outputheight = ($inputwidth * $height)/ $width; 
     } 
// And if the image is taller rather than wider, then set the height and figure out the width 
     elseif (($width/$height) < ($inputwidth/$inputheight)) { 
      $outputwidth = ($inputheight * $width)/ $height; 
      $outputheight = $inputheight; 
     } 
// And because it is entirely possible that the image could be the exact same size/aspect ratio of the desired area, so we have that covered as well 
     elseif (($width/$height) == ($inputwidth/$inputheight)) { 
      $outputwidth = $inputwidth; 
      $outputheight = $inputheight; 
      } 
// Echo out the results and done 
echo '<img src="'.$image.'" width="'.$outputwidth.'" height="'.$outputheight.'">'; 

निम्नलिखित के साथ आया था, और यह पूरी तरह से काम किया है, तो मैंने सोचा कि मैं हिस्सा होगा, उम्मीद है कि यह कुछ लोगों को

+1

आप सर एक जीवन बचतकर्ता +1 –

+1

मैं एक ही समस्या के लिए googling था और फिर मुझे आपके काम मिल गया जो काम करता है बहुत अच्छी तरह से और मुझे बहुत समय बचाओ! आपको बहुत - बहुत धन्यवाद! :-) –

2

अगर मैं आपके सवाल का सही ढंग से समझ, मैं सरल तरीके से मदद करता है छवियों स्केलिंग के निम्नलिखित सीएसएस स्टाइल नियमों का उपयोग करने होगा:

max-width 
max-height 

इन दोनों स्टाइल नियम alow आप एक छवि की अधिकतम चौड़ाई/ऊंचाई निर्दिष्ट करने के लिए। आपके द्वारा निर्दिष्ट आकार को फिट करने के लिए ब्राउज़र छवि को नीचे (पहलू अनुपात को संरक्षित) स्केल करेगा। तुम भी एक छवि के लिए एक न्यूनतम चौड़ाई/ऊंचाई निर्दिष्ट करने के लिए इन दोनों का उपयोग कर सकते हैं:

min-width 
min-height 
+0

अच्छी तरह से हाँ, बहुत सच है, हालांकि यह पहलू अनुपात को संरक्षित नहीं कर रहा था, यह गलत कर रहा था, लेकिन इसके परिणामस्वरूप मुझे केवल अपनी खुद की लिटलर स्क्रिप्ट के साथ php –

+0

में ऐसा करने के लिए आ रहा था अगर आप थे ऊपर उन सीएसएस स्टाइल नियमों का उपयोग ('चौड़ाई' और 'ऊंचाई' नहीं), यह हमेशा पहलू अनुपात को संरक्षित रखना चाहिए। अगर यह मेरे लिए अच्छा नहीं था जैसे कि पाइपलाइन के साथ कहीं भी एक बग है। एक ऑनलाइन डेमो जांचें। यदि यह अभी भी पहलू अनुपात को संरक्षित नहीं करता है, तो आपको उस ब्राउज़र के ब्राउज़र विक्रेता के साथ एक बग फ़ाइल करना चाहिए जिसका आप उपयोग कर रहे हैं। – starbeamrainbowlabs

+0

धन्यवाद लेकिन मैं इसके बारे में बहुत चिंतित नहीं हूं, मुझे वास्तव में नीचे PHP शैली का उपयोग पसंद है –

संबंधित मुद्दे