كيفية توسيط صورة باستخدام محاذاة النص: توسيط

و العنصر هو عنصر مضمنة (قيمة العرض inline-block). يمكن توسيطها بسهولة عن طريق إضافة text-align: center;خاصية CSS إلى العنصر الأصل الذي يحتوي عليها.

لتوسيط صورة باستخدام ، text-align: center;يجب وضع الجزء الداخلي لعنصر على مستوى الكتلة مثل a div. نظرًا لأن text-alignالخاصية تنطبق فقط على العناصر على مستوى الكتلة ، فإنك تضعها text-align: center;على عنصر مستوى كتلة الالتفاف لتحقيق توسيط أفقي .

مثال

   Center an Image using text align center  .img-container { text-align: center; } 

ملاحظة: يجب أن يكون العنصر الأصلي عنصر كتلة. إذا لم يكن عنصر الحظر ، فيجب عليك إضافةdisplay: block;خاصية CSS معtext-alignالخاصية.

   Center an Image using text align center  .img-container { text-align: center; display: block; }      

العرض التوضيحي: Codepen

تناسب الكائن

بمجرد توسيط صورتك ، قد ترغب في تغيير حجمها. و object-fitيحدد خاصية كيف أن يستجيب عنصر لعرض / ارتفاع انها مربع الوالدين.

يمكن استخدام هذه الخاصية للصور أو الفيديو أو أي وسائط أخرى. يمكن استخدامه أيضًا مع object-positionالخاصية للحصول على مزيد من التحكم في كيفية عرض الوسائط.

بشكل أساسي ، نستخدم object-fitالخاصية لتحديد كيفية تمدد أو ضغط وسائط مضمنة.

بناء الجملة

.element 

القيم

• fill: هذه هي القيمة الافتراضية . قم بتغيير حجم المحتوى لمطابقة المربع الأصلي بغض النظر عن نسبة العرض إلى الارتفاع.
• contain: قم بتغيير حجم المحتوى لملء صندوقه الأصلي باستخدام نسبة العرض إلى الارتفاع الصحيحة.
• cover: مشابه containللمحتوى ولكن غالبًا ما يتم اقتصاصه.
• none: اعرض الصورة بحجمها الأصلي.
• scale-down: مقارنة الفرق بين noneو containالعثور على أصغر حجم الكائن الخرسانة.

التوافق المتصفح

و object-fitتدعمه معظم المتصفحات الحديثة، للمعلومات الأكثر محدثة حول التوافق يمكنك التحقق من ذلك //caniuse.com/#search=object-fit.

توثيق

• محاذاة النص - MDN
• الكائن المناسب - MDN
• - MDN