المقال الاصلي بكتابة Cem Eygi
تمت الترجمة بواسطة Aicha AIT OUMGHAR
تعتبر معظم المواقع التي أُنشئت حديثا مواقعَ متجاوبة (responsive). و إذا كنت في حاجة لـتوسيط الصورة وتحديد إحداثياتها على هذه المواقع, فيجب عليك أن تتعلم كيف تجعل الصور سلسة ومتجاوبة باستخدام الـCSS.
لقد قمت بنشر فيديو تعليمي منذ عدة أسابيع, وشرحت فيه كيفية إنشاء موقع متجاوب بالخطوات المفصلة, وتناولت فيه كذلك كيفية جعل الصور متجاوبة. ولكن في هذا المقال أرغب في تقديم المزيد من التفاصيل حول هذه النقطة الأخيرة.
سوف تتعرف كذلك على بعض المشاكل العامة التي قد تصادفها وأنت تحاول جعل الصور متجاوبة, وسأحاول أن أشرح كيف تحلها.
كيف تجعل الصور متجاوبة باستخدام CSS ؟
هل يجب علي استخدام الوحدات النسبية أم المطلقة؟
من السهل جعل الصورة سلسة ومتجاوبة. عندما تقوم برفع الصورة على موقعك, فإنها تتوفر على عرض وارتفاع تلقائيين, وتستطيع تغيير هذين الأخيرين باستخدام الـCSS.
لجعل الصورة متجاوبة, فأنت في حاجة لإعطاء قيمة جديدة لخاصية الـwidth, وبعدها سيتم تعديل ارتفاع الصورة بشكل تلقائي لتناسب هذا العرض.
أهم ما يجب أن تعرفه هنا هو أنك ملزم دائما باستخدام الوحدات النسبية لتحديد قيمة العرض. استخدم مثلا النسبة المئوية عوض الوحدات المطلقة مثل البيكسل (pixels).
img {
width: 500px;
}
هنا على سبيل المثال, قمنا بإعطاء العرض قيمة ثابتة هي 500px, لذا فالصورة هنا ليست متجاوبة, لأن الوحدة المستخدمة مطلقة.
img {
width: 50%;
}
هنا تظهر أهمية استخدام وحدة نسبية مثل 50%. وبهذه الطريقة ستجعل صورك سلسة وتسمح لها بتغيير أبعادها كيفما كان حجم الشاشة.
هل يجب علي استخدام الـMedia Queries؟
إحدى أكثر الأسئلة التي تطرح علي هي حول وجوب استخدام الـmedia queries من عدمه.
الـmedia query هي من الخصائص المهمة لـCSS التي تساعد في جعل الموقع متجاوبا. لن أخوض في تفاصيل أكثر هنا, ولكن تستطيع الاطلاع على مقالي هذا لاحقا حتى تتعلم كيف تستخدم الـmedia queries بتفصيل أكثر.
الجواب على هذا السؤال يتغير بتغير الوضعية. فإذا كنت تريد لصورتك أن تغير أبعادها من جهاز لآخر, فإنت تحتاج استخدام الـmedia queries. وإلا فأنت لست في حاجة إليها.
والآن فيما يخص هذا المثال, فصورتك لها عرض قيمته 50% كيفما كانت أبعاد الشاشة. ولكن إذا كنت ترغب في جعلها تأخذ حجما كاملا على شاشات الهواتف فآنذاك ستكون في حاجة لاستخدام الـmedia queries:
@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}
استنادا على قاعدة الـmedia query المستخدمة هنا, فكل جهاز شاشته أصغر من 480px فإن الصورة بداخله سيتم عرضها بالحجم الكلي لشاشة هذا الجهاز.
تستطيع أيضا مشاهدة نسخة الفيديو لهذا المقال، أسفله.
لماذا لا تعتبر خاصية الـmax-width أفضل خيار؟
هناك طريقة أخرى يمكن استخدامها لجعل الصور متجاوبة, وهي استخدام خاصية الـmax-width. إلا أنها ليست دائما أفضل طريقة, وذلك لأنها قد لا تعمل مع جميع احجام الشاشات والأجهزة.
أول شيء ينبغي علينا فهمه قبل المرور إلى مثال هو ما الذي تقوم به خاصية الـmax-width على وجه التحديد.
خاصية الـmax-width تعطي لعرض العنصر قيمة قصوية, الأمر الذي يحول دون السماح لعرض العنصر بتجاوز هذه القيمة (ولكنها تستطيع أخذ قيمة أقل).
على سبيل المثال, إذا كان للصورة عرض تلقائي قيمته 500px, وكان حجم شاشتك هو 360px فقط, فحينها لن تستطيع رؤية الصورة كاملة, لعدم توفر المساحة الكافية لذلك:
img {
max-width: 100%;
width: 500px; // لنعتبر أن هذا هو الحجم التلقائي
}
لذا, يجب عليك إضافة الخاصية max-width للصورة, وإعطائها قيمة 100%, الأمر الذي يجعل حجم الصورة يتقلص من 500px إلى حدود 360px. وبالتالي يصبح بإمكانك رؤية الصورة كاملة على شاشة بحجم أصغر.
أفضل مافي الأمر هنا هو أن الصورة تصبح سلسة في جميع الأجهزة التي حجم شاشتها أصغر من 500px.
ولكن للأسف, قد يتجاوز حجم الشاشة 500px قليلا دون أن يتغير عرض الصورة, لأن هذا الأخير يمتلك قيمة تلقائية قدرها 500px. هذه الطريقة تكسر تجاوبية الصورة على الشاشات التي يتجاوز حجمها 500px.
لإصلاح هذا المشكل, فأنت في حاجة لاستخدام خاصية الـwidth مرة أخرى, ما يجعل خاصية الـmax-width عديمة الفائدة.
ماذا عن الارتفاعات؟
مشكلة أخرى شائعة قد تصادفها, تتعلق بخاصية الـheight. في العادة, نجد أن ارتفاع الصورة يتغير لوحده بشكل أتوماتيكي, فلا تحتاج لإعطاء قيمة ارتفاع لصورك (لأن هذا يكسر الصورة نوعا ما).
ولكن أحيانا, قد يتوجب عليك التعامل مع صور تحتاج بالضرورة إلى ارتفاع ثابت. وعندما تعطيها قيمة ارتفاع ثابتة, فإن الصورة ستبقى متجاوبة ولكنها لن تبدو بشكل جيد.
img {
width: 100%;
height: 300px;
}
لحسن الحظ, هناك خاصية أخرى يمنحها الـCSS لحل هذه المشكلة.
الحل: الخاصية Object-Fit
حتى تتحكم أكثر في صورك, فإن الـCSS يوفر خاصية أخرى تسمى الـobject-fit. هذا مثال يوضح استخدام هذه الخاصية لجعل صورتك تبدو أفضل:
img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: bottom;
}
إذا دعت الحاجة لذلك, فبمقدورك استخدام الخاصية object-position كذلك (إضافة إلى الـobject-fit) حتى يتم التركيز على موضع معين من الصورة. كثيرون ليسوا على دراية بهذه الخاصية, ولكنها قد تكون مفيدة في علاج هذا النوع من المشاكل.
آمل أن يكون هذا المقال قد ساعدك في فهم وعلاج مشاكلك المتعلقة بالصور المتجاوبة. إذا أردت قراءة المزيد عن تطوير الويب, فلا تتردد في زيارة قناتي على اليوتيوب.
أشكرك على القراءة!