كيفية توسيط صورة باستخدام محاذاة النص: توسيط
و
العنصر هو عنصر مضمنة (قيمة العرض 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