Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

CSSتنسيق الصور و الفيديوهات

  • مفهوم تنسيق الصورة و الفيديوهات
  • كيفية ضبط عرض الصورة أو الفيديو
  • كيفية تحديد موقع الصورة أو الفيديو

مفهوم تنسيق الصورة و الفيديوهات

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

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

كيفية ضبط عرض الصورة أو الفيديو

لتحديد كيف سيتم عرض الصورة أو الفيديو يمكنك استخدام الخاصية object-fit و تمرير إحدى القيم التالية لها.

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

في المثال التالي قمنا بإعطاء الصور حجم موحّد حتى تلاحظ الفرق بين القيم fill، contain، cover، none، scale-down.

مثال

img {
width: 200px;
height: 150px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
img { width: 200px; height: 150px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: 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 الأول يمثل كم نريد أن يكون الفيديو أو الصورة بعيدة جهة اليسار و الثاني يمثل كم نريد أن تكون الصورة بعيد من الأعلى.

في المثال التالي قمنا بعرض الصورة بمواقع مختلفة نسبةً للمكان المخصص لها.

مثال

<img src="logo.png" style="object-position: 20px 20px"/>
<img src="logo.png" style="object-position: 30% top"/>
<img src="logo.png" style="object-position: center top"/>
<img src="logo.png" style="object-position: center center"/>
<img src="logo.png" style="object-position: center bottom"/>
<img src="logo.png" style="object-position: 20px 20px"/> <img src="logo.png" style="object-position: 30% top"/> <img src="logo.png" style="object-position: center top"/> <img src="logo.png" style="object-position: center center"/> <img src="logo.png" style="object-position: center bottom"/>
جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة