تقوم JavaScript بتغيير حجم الصور ديناميكيًا

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

لقد واجهت هذا النوع من الأشياء في مقال كتبته منذ بعض الوقت، واستخدمت لاحقًا خصائص CSS overflow وmax-width لحل مشكلة تشوه الصفحة مؤقتًا. ميزة هذه الطريقة هي أنها بسيطة، ولكن عيبها أنها ستدمر تأثير بعض التفاصيل.

على سبيل المثال، التجاوز: مخفي يعني أنه عندما يكون عرض العنصر الداخلي أكبر من الإطار الأصلي، يتم إخفاء العرض الزائد. قد يؤدي القيام بذلك إلى قطع بعض المحتوى وإخفائه فجأة، وهو أمر مؤسف للجمهور.

إذا قمت بتحديد الحد الأقصى لعرض الرسوم التوضيحية للمقالة من خلال سمة max-width، فستحتاج إلى مراعاة توافق كل متصفح. IE6 لا يدعم هذه السمة. في اعتقادي، على الرغم من أن بعض المتصفحات تدعم هذه السمة، لا يتم تغيير حجم الصور بشكل متناسب (يبدو أن هذا هو الحال في Safari وOpera، لا أستطيع أن أتذكر بوضوح). لمستخدمي هذه المتصفحات غير عادلة للغاية.

لذلك، ما اخترته أخيرًا هو تغيير حجم الصورة ديناميكيًا من خلال JavaScript. تتمتع هذه الطريقة بتوافق جيد مع المتصفحات المختلفة (قلة قليلة من الأشخاص قد يقومون بتعطيل JavaScript في الوقت الحاضر، أليس كذلك؟)، وإذا تم تغيير السمة، فيمكن أيضًا تغيير الحد الأقصى لحجم الرسوم التوضيحية للمقالة بمرونة.

هناك حلان نظرًا لأن السمة التي أستخدمها محملة بمكتبة jQuery، فيمكن تنفيذها باستخدام الكود التالي:

$ ( وثيقة ) جاهزة ( وظيفة ( ) { .
 $ ( '.post img' ) كل ( وظيفة ( ) { .
 var maxWidth = 100 ; // الحد الأقصى لعرض الصورة
 var maxHeight = 100 ; // الحد الأقصى لارتفاع الصورة
 نسبة فار = 0 ؛ // نسبة القياس
 عرض var = $ ( هذا ) العرض ( ) // العرض الفعلي للصورة
 ارتفاع var = $ ( هذا ) الارتفاع ( ) // الارتفاع الفعلي للصورة

 // تحقق مما إذا كانت الصورة واسعة جدًا
 إذا ( العرض > الحد الأقصى للعرض ) {
 النسبة = maxWidth / width ؛ // حساب نسبة القياس
 $ ( هذا ) .css ( "width" , maxWidth ) ;
 الارتفاع = الارتفاع * النسبة // احسب الارتفاع بعد القياس المتساوي
 $ ( this ) .css ( "height" , height * نسبة ) ; // اضبط الارتفاع بعد القياس التناسبي
 }

 // تحقق مما إذا كانت الصورة طويلة جدًا
 إذا ( الارتفاع > الحد الأقصى للارتفاع ) {
 نسبة = maxHeight / ارتفاع ; // حساب نسبة القياس
 $ ( هذا ) .css ( "height" , maxHeight ) ;
 العرض = العرض * النسبة // احسب الارتفاع بعد القياس المتساوي
 $ ( this ) .css ( "width" , width * نسبة ) ; // اضبط الارتفاع بعد القياس التناسبي
 }
 } ) ;
 } ) ;

إذا كنت لا تريد تحميل مكتبة jQuery، يمكنك استخدام الكود التالي:

 وظيفة ResizeImage ( الصورة ، الحد الأقصى لعرض الرسم التوضيحي ، الحد الأقصى لارتفاع الرسم التوضيحي )
 {
 إذا ( image.className == "Thumbnail" )
 {
 ث = الصورة. العرض ؛
 ح = الصورة. الارتفاع ؛

 إذا ( ث == 0 || ح == 0 )
 {
 image.width = maxwidth ;
 image.height = maxheight ;
 }
 وإلا إذا ( ث > ح )
 {
 إذا ( w > maxwidth ) image.width = maxwidth ;
 }
 آخر
 {
 if ( h > maxheight ) height = maxheight ;
 }

 image.className = "ScaledThumbnail" ;
 }
 }

يعد استخدام JavaScript النقي أكثر إزعاجًا بعض الشيء، حيث تحتاج إلى إضافة class="Thumbnail" يدويًا إلى الصورة، ولكن التأثير النهائي هو نفسه.

النص الأصلي: ضبط حجم الصورة ديناميكيًا

شكرا بولو على مساهمتك