تناقضات في اتجاه الصورة في علامات الصور

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

يوضح المثال المقدم صورة تظهر بشكل صحيح في متصفح الويب، ولكنها تصبح معكوسة عند تعيينها لسمة src لعلامة الصورة. ينشأ هذا التباين بسبب البيانات الوصفية المضمنة في الصور التي تحدد اتجاهها. لمكافحة هذا، يقدم CSS خاصية اتجاه الصورة.

حل CSS: اتجاه الصورة

عن طريق إضافة إعلان CSS التالي، يمكن الاتجاه الصحيح للصورة سيتم استعادته:

img {
    image-orientation: from-image;
}

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

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