الغوص العميق في ملاءمة الكائن وحجم الخلفية في CSS

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

أولاً ، دعنا نحدد المشكلة. ضع في اعتبارك الشكل التالي:

لماذا يحدث هذا؟

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

نرى هذا في الشكل التالي:

الحل

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

الآن بعد أن فهمنا كيفية عمل ذلك ، دعنا ندخل في كيفية عمل ذلك في المتصفح. ( تنبيه المفسد: إنه أسهل! )

object-fit

تحدد خاصية object-fit كيف يجب تغيير حجم محتوى عنصر مستبدل مثل img أو video ليناسب الحاوية الخاصة به. القيمة الافتراضية object-fit هي fill ، والتي يمكن أن تؤدي إلى ضغط الصورة أو تمديدها.

لنستعرض القيم الممكنة.

القيم الممكنة object-fit

object-fit: contain

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

object-fit: cover

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

object-fit: fill

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

object-fit: none

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

بصرف النظر عن object-fit ، لدينا أيضًا خاصية object-position ، المسؤولة عن وضع الصورة داخل حاويتها.

القيم الممكنة object-position

تعمل خاصية object-position بشكل مشابه لخاصية background-position في CSS:

تعمل الكلمات الرئيسية top bottom أيضًا عندما تكون نسبة العرض إلى الارتفاع للمربع المحتوي أكبر رأسيًا:

background-size CSS

مع background-size ، يتمثل الاختلاف الأول في أننا نتعامل مع الخلفية ، وليس عنصر HTML ( img ).

القيم الممكنة background-size

القيم المحتملة background-size هي auto ، و contain ، cover .

background-size: auto

باستخدام auto ، ستبقى الصورة بحجمها الافتراضي:

background-size: cover

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

background-size: contain

في هذه الحالة ، سيتم تغيير حجم الصورة لتناسب الحاوية. إذا كانت نسب العرض متوقفة عن التشغيل ، فسيتم تحويل الصورة إلى letterbox كما هو موضح في المثال التالي:

بالنسبة background-position ، فهو مشابه لكيفية عمل object-position . الاختلاف الوحيد هو أن الموضع الافتراضي لموضع object-position يختلف عن موضع background-position .

عندما لا تستخدم object-fit أو background-size

إذا تم إعطاء العنصر أو الصورة ارتفاعًا ثابتًا وكان background-size: cover أو object-fit: cover مطبق عليه ، ستكون هناك نقطة تكون فيها الصورة عريضة جدًا ، وبالتالي تفقد التفاصيل المهمة التي قد تؤثر على كيفية يدرك المستخدم الصورة.

ضع في اعتبارك المثال التالي الذي تم فيه إعطاء الصورة ارتفاعًا ثابتًا:

 .card__thumb { height: 220px; }

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

لا يوجد سوى إصلاح واحد من اثنين لهذا. الأول هو استخدام اختراق الحشو لإنشاء نسبة جوهرية.

 .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

الإصلاح الثاني هو استخدام خاصية CSS الجديدة aspect-ratio . باستخدامه يمكننا القيام بما يلي:

 .card__thumb img { aspect-ratio: 4 / 3; }

ملاحظة : لقد كتبت بالفعل عن خاصية aspect-ratio بالتفصيل في حالة رغبتك في التعرف عليها: "دعنا نتعرف على نسبة العرض إلى الارتفاع في CSS".

حالات الاستخدام والأمثلة

صور المستخدم الرمزية

حالة استخدام مثالية object-fit: cover عبارة عن صور رمزية للمستخدم. غالبًا ما تكون نسبة العرض إلى الارتفاع المسموح بها للصورة الرمزية مربعة. قد يؤدي وضع صورة في حاوية مربعة إلى تشويه الصورة.

 .c-avatar { object-fit: cover; }

قائمة الشعارات

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

لحسن الحظ ، object-fit: contain هو حل جيد لذلك.

 .logo__img { width: 150px; height: 80px; object-fit: contain; }

المادة المصغرة

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

 .article__thumb { object-fit: cover; }

خلفية البطل

في حالة الاستخدام هذه ، سيعتمد قرار استخدام عنصر img أو خلفية CSS على ما يلي:

• هل الصورة مهمة؟ إذا تم تعطيل CSS لسبب ما ، فهل نريد أن يرى المستخدم الصورة؟
• أم أن الغرض من الصورة مجرد ديكور؟

بناءً على إجابتنا ، يمكننا تحديد الميزة التي يجب استخدامها. إذا كانت الصورة مهمة :

 <section class="hero"> <img class="hero__thumb" src="thumb.jpg" alt="" /> </section>

 .hero { position: relative; } .hero__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

إذا كانت الصورة مزخرفة ، فيمكننا background-image :

 .hero { position: relative; background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("thumb.jpg"); background-repeat: no-repeat; background-size: cover; }

CSS أقصر في هذه الحالة. تأكد من أن أي نص يتم وضعه فوق الصورة يمكن قراءته والوصول إليه.

إضافة خلفية إلى صورة object-fit: contain

هل تعلم أنه يمكنك إضافة لون خلفية إلى img ؟ سنستفيد من ذلك عند استخدام object-fit: contain .

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

 img { object-fit: contain; background-color: #def4fd; }

عنصر الفيديو

هل احتجت يومًا إلى video كخلفية؟ إذا كان الأمر كذلك ، فمن المحتمل أنك تريده أن يأخذ العرض والارتفاع الكاملين لوالده.

 .hero { position: relative; background-color: #def4fd; } .hero__video { position: aboslute; left: 0; top: 0; width: 100%; height: 100%; }

ولجعله يغطي عرض والارتفاع الأصل ، نحتاج إلى تجاوز القيمة الافتراضية object-fit :

 .hero__video { /* other styles */ object-fit: cover; }

خاتمة

كما رأينا ، فإن كلاً object-fit وحجم background-size مفيدان جدًا في التعامل مع نسب عرض إلى ارتفاع مختلفة للصورة. لن نتحكم دائمًا في تعيين الأبعاد المثالية لكل صورة ، وهنا تبرز ميزتا CSS هاتان.

تذكير ودي بشأن الآثار المترتبة على إمكانية الوصول للاختيار بين عنصر img وخلفية CSS: إذا كانت الصورة مزخرفة تمامًا ، فانتقل إلى خلفية CSS. خلاف ذلك ، فإن img تكون أكثر ملاءمة.

آمل أن تكون قد وجدت هذه المقالة مفيدة. شكرا لقرائتك.