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

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

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

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

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

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

في المثال التالي قمنا بإعطاء الصور حجم موحّد حتى تلاحظ الفرق بين القيم 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;
}

كيفية تحديد موقع الصورة أو الفيديو

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

لتحديد الإحداثيات التي سيتم عرض الصورة أو الفيديو عليها نسبةً المكان المخصص لها يمكنك استخدام الخاصية object-position و تمرير قيمة أو قيمتين لها مع الإشارة إلى أنه في حال تمرير قيمة واحدة فإنه سيتم إظهارها عمودياً في الوسط. و في حال تمرير قيمتين لها فالأولى تمثل مكانها أفقياً و الثانية عمودياً.

فيما يلي القيم التي يمكنك تمريرها لتحديد مكان ظهور الفيديو أو الصورة.

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

<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"/>