كيفية تغيير حجم الصور بشكل متناسب

يعد تغيير حجم الصور بشكل متناسب مهمة شائعة يمكن استخدامها لتناسب الصور في أبعاد محددة مع الحفاظ على جوانبها نسبة. يعد هذا مفيدًا بشكل خاص عند العمل مع صور ذات أحجام مختلفة تحتاج إلى عرضها بشكل متسق.

لتغيير حجم صورة بشكل متناسب باستخدام jQuery، يمكنك استخدام الكود التالي:

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

يقوم هذا الكود بتعيين الحد الأقصى لعرض وارتفاع الصورة إلى 100%، مما يسمح للصورة بالقياس بشكل متناسب لتتناسب مع هذه الأبعاد. تم ضبط خاصيتي "العرض" و"الارتفاع" على "تلقائي" للحفاظ على نسبة العرض إلى الارتفاع الأصلية.

هناك طريقة أخرى لحساب الأبعاد المناسبة للصورة مع الحفاظ على نسبة العرض إلى الارتفاع وهي استخدام دالة CalculateAspectRatioFit() الوظيفة:

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

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

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

تأخذ هذه الوظيفة العرض والارتفاع الأصليين للصورة، بالإضافة إلى الحد الأقصى للعرض والارتفاع المتاح، وتحسب العرض والارتفاع الجديد الذي يحافظ على نسبة العرض إلى الارتفاع ضمن الحدود المحددة.