إنشاء تحجيم صورة خلفية مستجيبة

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

صورة واحدة للعديد من الشاشات

نظرًا لأن تخطيط موقع الويب الخاص بك يتغير ويتحدد بأحجام مختلفة للشاشة ، فيجب أيضًا تغيير حجم صور الخلفية هذه وفقًا لذلك. في الواقع ، تعد هذه "الصور المرنة" واحدة من الأجزاء الرئيسية لمواقع الويب المتجاوبة (جنبًا إلى جنب مع الشبكة المرنة واستعلامات الوسائط). كانت هذه القطع الثلاث عنصرًا أساسيًا في تصميم الويب سريع الاستجابة منذ البداية ، ولكن في حين أنه كان دائمًا من السهل إلى حد ما إضافة استجابة سريعة الصور المضمنة إلى موقع ما (الصور المضمنة هي الرسومات التي تم ترميزها كجزء من ترميز HTML) ، وهي تفعل الشيء نفسه مع صور الخلفية (والتي تم تصميمها في الصفحة باستخدام خصائص خلفية CSS) منذ فترة طويلة تمثل تحديًا كبيرًا للعديد من مصممي الويب والواجهة الأمامية المطورين. لحسن الحظ ، فإن إضافة خاصية "background-size" في CSS جعلت هذا ممكنًا.

في مقال منفصل ، تناولنا كيفية استخدام حجم خلفية خاصية CSS3 لتمديد الصور لتلائم النافذة ، ولكن هناك طريقة أفضل وأكثر فائدة للنشر لهذه الخاصية. للقيام بذلك ، سوف نستخدم تركيبة الخاصية والقيمة التالية:

حجم الخلفية: غطاء ؛ 

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

كيفية استخدام "background-size: cover" ؛

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

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

قم بتحميل صورتك إلى مضيف الويب الخاص بك وأضفها إلى CSS كصورة خلفية:

صورة الخلفية: url (fireworks-over-wdw.jpg) ؛
تكرار الخلفية: لا تكرار ؛
موضع الخلفية: مركز المركز ؛
مرفق الخلفية: ثابت ؛ 

أضف المستعرض المسبق CSS أولاً:

-حجم خلفية -webkit: غطاء ؛
- حجم الخلفية: غطاء ؛
- حجم الخلفية: غطاء ؛ 

ثم أضف خاصية CSS:

حجم الخلفية: غطاء ؛ 

استخدام صور مختلفة تناسب مختلف الأجهزة

في حين أن التصميم سريع الاستجابة لتجربة كمبيوتر سطح المكتب أو الكمبيوتر المحمول أمر مهم ، فإن تنوع الأجهزة التي يمكنها الوصول إلى الويب بشكل ملحوظ ، ويأتي معها تنوع أكبر في أحجام الشاشات الذي - التي.

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

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