CSSتنسيق الصور و الفيديوهات
- مفهوم تنسيق الصورة و الفيديوهات
- كيفية ضبط عرض الصورة أو الفيديو
- كيفية تحديد موقع الصورة أو الفيديو
مفهوم تنسيق الصورة و الفيديوهات
إذا كانت المساحة المخصصة لعرض الصور أو الفيديوهات غير مساوية لحجمها فيمكنك تحديد كيف سيتم عرضها فيها. أي يمكنك تحديد ما إن كان يجب تصغيرها، تكبيرها أو تمديدها حتى تملئ كل المساحة المتاحة.
في هذا الدرس ستتعرف على جميع الخصائص و القيم التي يمكنك استخدامها للتحكم في طريقة عرض الصور و الفيديوهات.
كيفية ضبط عرض الصورة أو الفيديو
لتحديد كيف سيتم عرض الصورة أو الفيديو يمكنك استخدام الخاصية object-fit و تمرير إحدى القيم التالية لها.
| القيمة | إستخدامها |
|---|---|
| fill | هذه القيمة الإفتراضية، و هي تجعل الفيديو أو الصورة يتغير حجمها حتى تلمأ كامل المساحة المتاحة. |
| contain | تجعل الفيديو أو الصورة يتغير حجمها مع الحفاظ على شكلها الأصلي و يثبت حجمها بمجرد أن تلامس حدود المساحة المتاحة لعرضها. |
| cover | تجعل الفيديو أو الصورة يتغير حجمها مع الحفاظ على شكلها الأصلي و يثبت حجمها بمجرد أن يتم ملئ المساحة المتاحة لعرضها. أي قد لا تظهر الصورة بأكملها و لكنها تملئ كامل المساحة المتوفرة. |
| none | تجعل حجم الفيديو أو الصورة ثابتة لا تتغير نسبةً للمساحة المتوفرة لعرضها. |
| scale-down | تجعل الفيديو أو الصورة أصغر إن كانت المساحة غير كافية لعرضها بحجمها الأصلي مع الحفاظ على شكلها الأصلي. |
في المثال التالي قمنا بإعطاء الصور حجم موحّد حتى تلاحظ الفرق بين القيم fill، contain، cover، none، scale-down.
مثال
كيفية تحديد موقع الصورة أو الفيديو
إذا كان حجم الفيديو أو الصورة أكبر من المساحة المخصص المتاحة لعرضها، يمكنك تحديد موقعها عمودياً و أفقياً نسبةً للمكان الذي سيتم عرضها فيه حتى تظهر الجزئية التي تريدها أنت بدلاً من الجزئية التي يختارها المتصفح.
لتحديد الإحداثيات التي سيتم عرض الصورة أو الفيديو عليها نسبةً المكان المخصص لها يمكنك استخدام الخاصية object-position و تمرير قيمة أو قيمتين لها مع الإشارة إلى أنه في حال تمرير قيمة واحدة فإنه سيتم إظهارها عمودياً في الوسط. و في حال تمرير قيمتين لها فالأولى تمثل مكانها أفقياً و الثانية عمودياً.
فيما يلي القيم التي يمكنك تمريرها لتحديد مكان ظهور الفيديو أو الصورة.
| القيمة | إستخدامها |
|---|---|
| left | لإظهار الفيديو أو الصورة ناحية اليسار و في الأعلى. |
| left top | لإظهار الفيديو أو الصورة ناحية اليسار و في الأعلى. |
| left center | لإظهار الفيديو أو الصورة ناحية اليسار و في الوسط عمودياً. |
| left bottom | لإظهار الفيديو أو الصورة ناحية اليسار و في الأسفل. |
| right | لإظهار الفيديو أو الصورة ناحية اليمين و في الأعلى. |
| right top | لإظهار الفيديو أو الصورة ناحية اليمين و في الأعلى. |
| right center | لإظهار الفيديو أو الصورة ناحية اليمين و في الوسط عمودياً. |
| right bottom | لإظهار الفيديو أو الصورة ناحية اليمين و في الأسفل. |
| center | لإظهار الفيديو أو الصورة في الوسط أفقياً و في الأعلى. |
| center top | لإظهار الفيديو أو الصورة في الوسط أفقياً و في الأعلى. |
| center center | لإظهار الفيديو أو الصورة في الوسط أفقياً و عمودياً. |
| center bottom | لإظهار الفيديو أو الصورة في الوسط أفقياً و في الأسفل. |
| x-unit y-unit | هنا نقصد تمرير عددين بوحدة قياس محددة مثل % أو px الأول يمثل كم نريد أن يكون الفيديو أو الصورة بعيدة جهة اليسار و الثاني يمثل كم نريد أن تكون الصورة بعيد من الأعلى. |
في المثال التالي قمنا بعرض الصورة بمواقع مختلفة نسبةً للمكان المخصص لها.
