आनुपातिक रूप से छवियों का आकार कैसे बदलें

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

jQuery का उपयोग करके आनुपातिक रूप से एक छवि का आकार बदलने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});

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

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}