انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: الصور المتجاوبة مع جميع الأجهزة في لغة CSS

CSS Image Responsive max width الصور المتجاوبة مع max-width في لغة CSS

سوف تتعلم في هذا الدرس responsive images الصور المتجاوبة وهي الصور التي تتلائم مع جميع حجم الشاشات أو الأجهزة في لغة CSS.

1 صفوف تعليمية
لغة CSS
3,259 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تكون الصور متجاوبة مع احجام الشاشات المختلفة عن طريق استخدام خاصية max-width وتعيين قيمتها تساوي "%100 " وفي هذه الحالة سوف يتم تصغير الصورة مع تصغير النافذه حتي لو كانت اصغر من الحجم الاصلي الموجود بداخل خاصية width ولكن لا يمكن يتم تكبير حجمها عن الحجم الموجود داخل خاصية width.

CSS Image Responsive max width

HTML 
img {
  max-width: 100%;
  height: auto;
}
جرّب بنفسك

جميع فقرات هذا الدرس (الصور المتجاوبة مع جميع الأجهزة في لغة CSS)