الحجم بالنسبة المئوية في CSS والتحكم بعرض الصور

الدرس: الحجم بالنسبة المئوية في CSS والتحكم بعرض الصور

المدة: 5 دقائق

وصف مختصر:

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

وصف الدرس


مقدمة عن تحديد الحجم بالنسبة المئوية في CSS



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



كيفية تحميل الصور من المجلد الخلفي



من الضروري معرفة كيفية تنظيم الملفات والمجلدات عند بناء موقع ويب. في هذا المثال، نعرض كيفية تحميل الصور من مجلد خلفي باستخدام خاصية src في وسم <img>.



ضبط الحجم الأقصى للصورة في صفحة الويب



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



كيفية ضبط الحجم الأقصى لأي عنصر كنسبة مئوية



في بعض الأحيان نرغب في ضبط حجم الأقسام أو العناصر الأخرى في الصفحة ليتناسب مع عرض المتصفح. يمكنك استخدام خاصية max-width مع القيم النسبية مثل 30% لجعل العناصر مرنة ومتجاوبة مع حجم الشاشة، مما يوفر تجربة مستخدم ممتازة على الأجهزة المختلفة.



كود المثال:



<section>
<div><img src="../test-image.png"/></div>
<div><img src="../test-image.png"/></div>
<div><img src="../test-image.png"/></div>
</section>
<style>
img {
max-width: 100px;
}
section {
max-width: 30%;
}
</style>


أهمية استخدام النسبة المئوية في التصميم



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



الخلاصة



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



الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

فيديو الدرس التعليمي الحجم بالنسبة المئوية في CSS والتحكم بعرض الصور

المصادر

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر

أوامر بناء صفحة ويب لتنسيق عرض الصور

أوامر تنسيق حجم للصور

ملحقات ال PDF

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF

ملف الشرح المساعد لخصائص الحجم في موقع الإنترنت

الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت

has been added to the cart. View Cart