تقنيات CSS الموفرة للوقت لإنشاء صور سريعة الاستجابة

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

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

طريقة "OMG I need this ASAP"

الساعة 5:00 مساءً يوم الجمعة ، يجب عليك إنهاء هذه الصفحة ، لكن الصور لن تتناسب مع التصميم. حان الوقت لاستخدام خدعتك السحرية!

.myImg { background-image: url("my-image.png"); background-size: cover; }

يبدوا مألوفا؟ لقد فعلناها جميعًا مرة واحدة ، ألا تشعر بالخيانة لك؟

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

الطريق من المستقبل

ماذا لو أخبرتك أن هذا النوع من السحر موجود أيضًا للعناصر؟ قل "hi" لخاصية object-fit - والتي تعمل أيضًا مع مقاطع الفيديو ، بالمناسبة!

.myImg { object-fit: cover; width: 320px; height: 180px; }

هذا كل ما لدي أيها الناس! انظر كيف coverيمكننا أيضًا استخدامها عند استرداد القيمة الصديقة contain.

طيب ما هو الفخ؟

لسوء الحظ object-fitلن تعمل على IE والإصدارات الأقدم من Safari ، ولكن هناك polyfill.

طريقة "Netflix"

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

سوف نحافظ على نسبة الصورة مع نسبة مئوية على paddingالممتلكات. ستكون صورتك بالحجم الكامل طفل مطلق.

يبدو الرمز كما يلي:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"يا رجل ، يبدو الأمر معقدًا."

بمجرد الحصول على المفهوم ، تكون التقنية بسيطة ومستخدمة على نطاق واسع. Netflix يستخدمه!

قليلا تجريبي:

الطريقة البسيطة

قد تعرف هذا بالفعل:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

إذا لم يكن التخطيط الخاص بك معقدًا للغاية ، فإنه يعمل في معظم الحالات.

طريقة الأداء (متقدم)

من خلال الأداء ، أعني أوقات التحميل. يمكن أن تؤدي صورة البطل الكبيرة إلى تدميرها وتجعل صفحتك بطيئة ، خاصة على الهاتف المحمول.

هل تعلم أنه في المتصفحات الحديثة يمكنك تغيير مصدر الصورة حسب عرض صفحتك؟ هذا ما srcsetصنع لأجل!

يمكنك دمجها مع علامة HTML 5 ، والتي تتحلل برشاقة بامتداد .

إلى خلاصة

  1. استخدمه background-image إذا لم تكن صورتك جزءًا من محتوى الصفحة.
  2. استخدم object-fitإذا كنت لا تهتم بـ IE.
  3. تعمل تقنية الحاوية المبطنة ، التي تستخدمها Netflix ، في كل مكان.
  4. في معظم الحالات ، ما height: auto;عليك سوى إضافة CSS.
  5. إذا كنت بحاجة إلى أوقات تحميل سريعة ، فاستخدم srcsetلتحميل صور أصغر على الهاتف المحمول.