شرح خاصية width لتنسيق العرض

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

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

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

<img src='https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png' width='50%'/>

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

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

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

<img src='https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png' width='100%'/>

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

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

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

<img src='https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png' width='200'/>

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