إذا كنت منخرطًا في تطوير الويب ، فمن المحتمل جدًا أن تكون على دراية بوحوشين ، والذي سيتم مناقشته في المقالة ، التي ننشر ترجمتها اليوم. نحن نتحدث عن الصور والمواعيد النهائية. في بعض الأحيان ، لسبب ما ، لا ترغب في احتواء الصور في أماكن تخطيطات الصفحة المصممة لها ، ولا يمكنك قضاء عدة ساعات في اكتشافها.
يقول مؤلف هذه المادة أنه غالبًا ما واجه مشكلة مماثلة ، وقد علمته هذه التصادمات شيئًا. هنا يريد التحدث عن خمسة أساليب لإدارة أحجام الصور التي يحبها أكثر.
النهج رقم 1: صورة الخلفية
الجمعة. الساعة الخامسة مساءً. أنت بحاجة ماسة لإنهاء صفحة معينة. كل شيء جاهز ، المشكلة الوحيدة هي الصور ، التي لا تناسب بأي حال مكانها. إذا حدث ذلك لك - إليك أداة سحرية تساعدك:
.myImg { background-image: url("my-image.png"); background-size: cover; }
تبدو مألوفة؟ كلنا فعلنا هذا مرة واحدة. هل هذا يوحي لك بالاحتيال؟
يعد استخدام خصائص
background مفيدًا للغاية ، فهم يفعلون ما هو متوقع منهم. ومع ذلك ، تجدر الإشارة إلى أنه يجب استخدامها فقط لتلك الصور التي ليست جزءًا من المحتوى الرئيسي للصفحة ، وللصور التي تحل محل النص ، وفي بعض
الحالات الخاصة .
الطريقة رقم 2: ملائمة الكائن
ماذا لو قلت أن خاصية
object-fit تنطبق على عناصر
<img> ؟ بالمناسبة ، إنه يعمل أيضًا مع الفيديو.
.myImg { object-fit: cover; width: 320px; height: 180px; }
هذا كل شيء. لاحظ أنه يمكن تعيين خاصية
object-fit على
contain .
supportدعم المشروع
لسوء الحظ ، لن يعمل
object-fit في IE وفي الإصدارات الأقدم من Safari ، ومع ذلك ، في مثل هذه الحالات هناك ملف
متعدد .
إليك معلومات الدعم المأخوذة
من هنا .
دعم متصفحات سطح المكتب الملائمة للكائنات→
هنا مثال باستخدام كائن مناسب
الطريقة رقم 3: الطريقة التي يستخدمها Netflix
قد يبدو ما تحدثنا عنه للتو مثيرًا للاهتمام ، ولكن في المتصفحات القديمة ، بدون تعدد الأشكال ، لن يعمل هذا. إذا كنت بحاجة إلى شيء عالمي ، فربما ما سنتحدث عنه الآن مناسب لك. هذه الطريقة ، واحدة من المفضلة ، تعمل في كل مكان.
وهو يتألف من حقيقة أنه يجب وضع الصورة في العنصر الأصلي ، حيث يتم تعيين خاصية
position إلى
relative ، ويتم تعيين خاصية
padding بنسب مئوية. نتيجة لذلك ، ستشغل الصورة المنطقة الحرة الكاملة للعنصر الأصلي. يبدو هذا:
.wrapper { position: relative; padding-top: 56.25%; } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
هنا قد تعتقد أنها معقدة للغاية. ومع ذلك ، بعد أن فهمت معنى هذه التقنية ، فإنك تدرك أنها بسيطة ومريحة للغاية. بالإضافة إلى ذلك ، يتم
استخدام هذه التقنية
على نطاق واسع ، على سبيل المثال ، في Netflix.
الق نظرة على أسماء الصفوف→
هنا مثال على تنفيذ هذه التقنية
النهج رقم 4: الارتفاع
هنا ، للتحكم في حجم الصورة ، استخدم
height: auto خاصية
height: auto ، بالإضافة إلى خاصية
max-width . من الممكن أنك تعرف هذه التقنية بالفعل:
img { height: auto; width: 100%; max-width: 720px; }
هذا النهج قابل للتطبيق في معظم الحالات ، عندما يكون التخطيط الخاص بك ليس معقدًا للغاية.
→
هنا مثالالنهج رقم 5: إدارة الصورة والأداء
أعني "الأداء" وقت تحميل الصفحة. يمكن أن تستغرق الصورة الكبيرة وقتًا طويلاً جدًا للتحميل ، مما يمنح المستخدم انطباعًا بأن صفحاتك بطيئة ، خاصة إذا تم عرض هذه الصفحات على أجهزة الجوال.
هل تعلم أنه في
المتصفحات الحديثة يمكنك تغيير مصدر الصورة اعتمادًا على عرض الصفحة؟ هذا هو السبب في
srcset سمة
srcset .
يمكن استخدام سمات مشابهة في علامة HTML 5
. , , <img> . , , <img> :
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture>
→ هنا مثالالملخص
لتلخيص:
- إذا لم تكن صورتك جزءًا من محتوى الصفحة ، فاستخدم
background-image . - إذا كان دعم IE لا يثير اهتمامك ، فاستخدم
object-fit . - تعمل تقنية الحاويات القائمة على Netflix مع
padding المخصص في كل مكان. - في معظم الحالات ، لحل المشكلة مع الصور ، يكفي استخدام
height: auto property في CSS؛ - إذا كنت ترغب في تقليل وقت تحميل الصفحة ،
srcset سمة srcset لتنزيل صور أصغر على الأجهزة المحمولة.
نأمل أن تكون أساليب التعامل مع الصور التي تمت مناقشتها هنا مفيدة لك.
