تعطيل مكافحة التعرج في تغيير حجم الصورة

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

ولحسن الحظ، يوفر CSS مجموعة من العلامات التي يمكنها تعطيل مانع التعرج بشكل فعال. ومع ذلك، على الرغم من العلامات المقترحة، مثل عرض الصور: -moz-crisp-edges، فإنها تميل إلى أن تكون غير فعالة لصور الخلفية.

للتغلب على هذا القيد، يقدم مقتطف التعليمات البرمجية التالي حلاً شاملاً يعمل عبر جميع المتصفحات الرئيسية:

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8                            */

}

يستخدم مقتطف الشفرة هذا علامات متعددة خاصة بالمتصفح، بما في ذلك -moz-crisp-edges لمتصفح Firefox، و-o-crisp-edges لمتصفح Opera، و-webkit-optimize-contrast لمتصفح Chrome وSafari. بالإضافة إلى ذلك، فإنه يستخدم القيمة المنقطة للدعم الشامل منذ عام 2021، ويحسن التباين للتوافق مع CSS3. أخيرًا، يتضمن وضع -ms-interpolation: أقرب جار لبرنامج Internet Explorer 8 والإصدارات الأحدث.

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