شرح خاصية height لتنسيق الارتفاع

أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية height
من خلال هذه الخاصية يمكننا التحكم فى حجم ارتفاع أى طبقة أو أداة أو أى شئ أخر كما يناسبنا
ويمكن استخدام هذه الخاصية فى ضبط حجم الصورة من حيث العرض وأيضا الفيديو وأى إضافات أخرى

مثال تطبيق خاصية height على صورة

في المثال التالى استخدمنا عنصر img والخاص بالصورة ثم خاصية src لتحديد رابط الصورة ثم خاصية height لتحديد حجم ارتفاع الصورة قمنا هنا بإعطاء هذه الخاصية قيمة 200 بيكسل

<img src='https://4.bp.blogspot.com/-J3VgZn8MoVE/WHECZmwCvnI/AAAAAAAAMQw/uaibT0iyNpQwZK_w3oj7naLGKbON98HNgCLcB/s320/7.jpg' height='200'/>

النتيجة

ومن خلال شرحنا لخاصية width فى الدرس السابق نجد أن خاصية width وخاصية height من أكثر الخواص التى يمكن استخدامها فى css وكما لاحظنا فى الدرس السابق عند استخدام خاصية width لتحديد عرض الصورة فإنه سيتم تقليص حجم ارتفاع الصورة تلقائيا أما عند استخدام خاصية height لتحديد ارتفاع الصورة فقط دون استخدام خاصية width فنجد أن الصورة أصبحت بشكل سيئ فلا يمكن ضبط عرض الصورة تلقائيا كما فى المثال السابق فيجب استخدام هاتين الخاصيتن معا width و height

مثال

في هذا المثال استخدمنا خاصية width وقمنا بإعطائها قيمة 300 بيكسل وخاصية height بقيمة 150 بيكسل

<img src='https://4.bp.blogspot.com/-J3VgZn8MoVE/WHECZmwCvnI/AAAAAAAAMQw/uaibT0iyNpQwZK_w3oj7naLGKbON98HNgCLcB/s320/7.jpg' width='300' height='200'/>

النتيجة