نحن نعلم أنه إذا تم ترك مهمة إنشاء الصور المصغرة لبرنامج ما، فسيكون التأثير أفضل بكثير، ومع ذلك، في بعض الأحيان بسبب عوامل معينة، مثل عدم دعم الخادم لـ GD، فمن المحتم أن تطلب من CSS القيام بذلك نيابةً عنك.
لتصغير حجم صورة كبيرة إلى حجم معين، بالنسبة للمتصفحات الحديثة، ما عليك سوى استخدام خصائص CSS max-width وmax-height.
بالنسبة إلى IE 6.0 والإصدارات الأقدم، سيتم تجاهل خاصيتي CSS المذكورتين أعلاه. للتعامل مع هذا النوع من الأشياء من قبل، غالبًا ما لجأنا إلى Javascript ثم أضفنا أحداث التحميل إلى الصور. على سبيل المثال:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="text/javascript">
وظيفة تغيير حجم الصورة (الكائن) {
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
من المؤكد أن هذا يمكن أن يحل المشكلة، ولكنه سيسبب مشاكل عند ترقية الصفحات المستقبلية - فمع تحسين المتصفحات لدعمها لـ CSS، سنقوم عاجلاً أم آجلاً بإزالة جميع أحداث التحميل من الصور. حان وقت عرض Expression نظرًا لأن IE يدعم وضع بعض البرامج النصية في CSS من خلال Expression، وهذا البرنامج النصي متاح فقط لـ IE 6.0 والإصدارات الأقدم، فمن المثالي كتابته في Expression.
أخيرًا، لتصغير حجم الصورة الكبيرة إلى 50 بكسل * 50 بكسل، يمكنك الرجوع إلى ملف CSS التالي:
.thumbImage{
الحد الأقصى للعرض: 50 بكسل؛
أقصى ارتفاع: 50 بكسل؛
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
الارتفاع: التعبير(this.height>50?50:auto);
}
