تعلم لغة css: التحكم في الصور images

لغة  css توفر العديد من القواعد التي يمكن من خلالها التحكم في الصور، وفي هذا الدرس سنرى:

• التحكم في حجم الصور
• توجيه الصور
• اضافة الصور كخلفية

التحكم في حجم الصور الصور Images Size in CSS

للتحكم في حجم صور يتم استعمال قاعدتي  width و height التي رأيناها سابقا في درس ببببببببب.
لدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم  large

وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:

التوجيه  Aligning

توجيه الصور يحتمل خيارين وهما يمين أو يسار باستعمال قاعدة float
لدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم  large

وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:

التوسيط    Centring

الصور تعتبر من العناصر التي تتبع قاعدة inline، فإذا وضعت صورة تقوم بأخذ مكانها بجانب فقرة نصية مثلا. لذلك لجعلها في الوسط يجب تحويلها لعنصر block حتى يمكن التحكم فيها وجعلها في الوسط.
كود html

<img src="photo.png" class="mylogo"/>

كود css

img.mylogo{

display: block;

margin: 0 auto;

}

استعمال الصورة كخلفية  Background Images

يمكن استعمال الصور كخلفيات ب css  وإليكم الطريقة:

body {

background-image: url("pattern.gif");
}

الخلفية يمكن التحكم بها بطرق عدة، وأهم القواعد هي:

Background-repeat وتحتمل الخيارات التالية:

repeat إعادة الخلفية

repeat-x أفقيا

repeat-y عموديا

no-repeat عدم إعادة الخلفية

كود css:

body {

background-image: url("pattern.gif");
Background-repeat: repeat;
}

background-attachement وتحتمل الخيارات التالية:

fixed لا تتحرك

scroll تتحرك مع النزول لأسفل الصفحة

كود css:

body {

background-image: url("pattern.gif");
background-attachement: fixed;
}

background-position
left top يسار أعلى
left center يسار وسط
left bottom يسار اسفل
right top يمين أعلى
right center يمين وسط
right bottom يمين اسفل
center top وسط أعلى
center center وسط
center bottom وسط أسفل

كود css:

body {

background-image: url("pattern.gif");
background-position: top left;
}

ويمكن استعمال النسبة المئوية
x% y%  القيمة الأولى افقيا والثانية عموديا

أو البيكسلز px
10px 50px