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

CSS image different devices with html الصورة المتجاوبة بواسطة HTML و CSS معاً

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

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

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

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

عن طريق عنصر picture في لغة  HTML يمكن أن يتم تغيير الصور تلقائياً مع إختلاف الأجهزة وذلك عن طريق إضافة أكثر من مصدر للصورة بداخل عنصر  picture تكون مجموعة عناصر source وعن طريق media يتم لتبديل بينهم.

CSS image different devices with html

تتغير الصورة عندما يتم إضافة خاصية media إلي العنصر source بداخل ملف HTML.

HTML 
<picture>
  <source srcset="https://www.closetag.com/images/photo4.jpg media="(max-width: 400px)">
  <source srcset="https://www.closetag.com/images/photo4.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
جرّب بنفسك

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