सुंदर छवि आउटपुट

मैंने हमेशा अपनी साइटों पर जिस तरह से चित्र प्रदर्शित किए हैं, वैसा नहीं है। मैं किसी प्रकार का आदेश, निर्भरता चाहता था। इसलिए, मुझे Google में स्क्रिप्ट और समाधान देखने के लिए मिला। एक असफल खोज के बाद, अपने दम पर कुछ करने का फैसला किया गया था।
लेकिन क्या? मैंने यह देखना शुरू किया कि कैसे लोकप्रिय साइटों से चित्र खींचे गए। मुझे तब तक सब कुछ पसंद नहीं आया जब तक कि मैंने Google छवियों और google + में आउटपुट को देखने के बारे में नहीं सोचा। मैं इस तथ्य से मारा गया था कि मैंने कभी इस पर ध्यान नहीं दिया, चित्रों को बिना काट-छाँट किए चौड़ाई और ऊंचाई में संरेखित किया गया है। मैं इस सिद्धांत को लागू करना चाहता था। यह एक मोज़ेक निकला। और सब कुछ जगह-जगह होने लगता है।
बिना किसी हिचकिचाहट के, मैं कोड लिखने के लिए बैठ गया जो चित्रों को उसी तरह से आउटपुट कर सकता है।

मैंने इसे बहुत सरलता से करने का फैसला किया: प्रत्येक पंक्ति को एक निश्चित ऊँचाई और चौड़ाई बनाएँ। मुख्य बात यह है कि ऊँचाई शर्तों में एक सेट से अधिक नहीं होनी चाहिए।

सूत्र

एक मार्कर और एक रेफ्रिजरेटर के साथ सशस्त्र (हां, मेरे पास व्हाइटबोर्ड नहीं है), मैंने कुछ सरल समीकरण बनाए और संबंध पाया।

एच ₁ * एक्स ₁ = एच ₂ * एक्स ₂ = ... = एच _एन एक्स _एन = ऊंचाई;
डब्ल्यू ₁ * एक्स ₁ + डब्ल्यू ₂ * एक्स ₂ + ... + डब्ल्यू _एन * एक्स _एन = चौड़ाई;
जहाँ
एच _1-एन - छवि ऊंचाइयों,
डब्ल्यू _1-एन - छवि चौड़ाई।
एक्स _1-एन - स्केलिंग चर (यदि आप इसके द्वारा ऊंचाई और चौड़ाई गुणा करते हैं, तो तस्वीर आनुपातिक रूप से बदल जाएगी)।

यह उस ऊंचाई = चौड़ाई * h ₁ / (w ₁ + w ₂ * h ₁ / h ₂ + w ₃ * h ₁ / h ₃ + ... + w _n * h ₁ / h _n ) निकला।

कोड

$widthdef=800; //   $heightdef=150; //    $margin=2; //   $uploadsdir='./upload/'; //,     //$img[ 1  N] -   //$imagescount=N ,   echo '<div style="width:'.$widthdef.'px;">'; $first=1; while($first<=$imagescount){ $images=$first-1; $hightes=$heightdef+1; while($hightes > $heightdef && $images<$imagescount) { $images++; $width=$widthdef-($images-$first+1)*($margin*2); //,   list($w[$images], $h[$images]) = getimagesize($uploadsdir.$img[$images]); //        $delim=$width*$h[$first]; $delit=$w[$first]; for($j=($first+1);$j<=$images;$j++) { $delit=$delit+$w[$j]*($h[$first]/$h[$j]); } $hightes=floor($delim/$delit);//  if($hightes<=$heightdef) { for($i=$first;$i<=$images;$i++) { $ht=$hightes.'px'; echo '<img style="margin:'.$margin.'px;" src="'.$uploadsdir.$img[$i].'" height="'.$ht.'">'; //  } $first=$images+1; } else { if($images==$imagescount) { // ,       for($y=$first;$y<=$images;$y++) { echo '<img style="margin:'.$margin.'px;" src="'.$uploadsdir.$img[$y].'" height="'.$heightdef.'px">'; } $first=$images+1; //,     } } } } echo '</div>'; 

यदि पूरी चौड़ाई में प्रदर्शित करने से पहले पर्याप्त चित्र नहीं हैं, तो हम उन्हें अधिकतम निर्दिष्ट ऊंचाई के साथ प्रदर्शित करते हैं।

लेखक से

कोड सही नहीं है, इसलिए टिप्पणियों को ध्यान में रखा जाता है।
आप यहां डेमो देख सकते हैं । वहां आप विकल्पों में लिप्त हो सकते हैं। लोड करने पर, चित्र सबसे कम संभव रिज़ॉल्यूशन का आकार लेता है। होस्टिंग कमजोर है, मैं पहले से ही माफी चाहता हूं।
आप इसे यहाँ डाउनलोड कर सकते हैं ।

मैं अन्य विचारों और सुधारों को भी सुनना चाहता हूं।

पुनश्च: कोड छोटे चित्रों के लिए अभिप्रेत नहीं है (मुझे व्यक्तिगत रूप से इसकी आवश्यकता नहीं है)। यदि आप बड़े और छोटे लोड करते हैं, तो बाद वाला बाहर खींच सकता है। अगर किसी को एक सुरुचिपूर्ण समाधान के साथ आता है, तो इसे साझा करें।

UPD: टिप्पणियों के लिए धन्यवाद, बहुत उपयोगी। मैं सुधार करूंगा। त्रुटि ठीक की। जैसा कि पहले ही कहा गया है, सभी तस्वीरें अभी भी यहाँ हैं (3 घंटे के बाद ताज द्वारा हटा दी गई हैं)।