الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <body> <p>Image with multiple sources and sizes.<p> <!-- لإعلام المتصفح أننا سنعرض صورة في الصفحة <picture> قمنا بإضافة الوسم :موضوع قمنا فيه بتحديد مسار و شروط عرض الصورة الموضوعة فيه <source> كل وسم في حال كان عرض الشاشة أكبر أو يساوي 600 بيكسل سيتم عرض الصورة الأولى في حال كان عرض الشاشة أكبر أو يساوي 450 بيكسل سيتم عرض الصورة الثانية في حال لم يتم عرض الصورة الأولى أو الثانية سيتم عرض الصورة الأخيرة --> <picture> <source media="(min-width:600px)" srcset="/tutorials/html/tags/source/pic-1.jpg"> <source media="(min-width:450px)" srcset="/tutorials/html/tags/source/pic-2.jpg"> <img alt="Default Image" style="width: auto;" src="/tutorials/html/tags/source/default.jpg"> </picture> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود