آموزش صفت SrcSet در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت SrcSet در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت SrcSet در HTML
صفت srcset
صفتی است که در درون تگ <Source> مورد استفاده قرار میگیرد و با استفاده از آن میتوانیم نحوه نمایش یک تصویر را در حالت های مختلف (در اندازه صفحه نمایش های مختلف) مشخص و یا تعریف نماییم.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
<source> |
Free-Learn
مثال از صفت SrcSet در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
در مثال زیر با استفاده از صفت media در تگ Source – تعریف کردم که وقتی اندازه عرض صفحه ی مرورگر بیشتر از ۶۵۰ پیکسل شد عکس (Logo_test.png) رو نمایش بده و اگر اندازه عرض بیشتر از ۴۶۵ پیکسل شد بیا و عکس (girls_test.jpg) رو نمایش بده.
1 2 3 4 5 6 7 8 9 |
<body> <picture> <source media="(min-width: 650px)" srcset="images/Logo_test.png"> <source media="(min-width: 465px)" srcset="images/girls_test.jpg"> <img src="images/cat.gif" alt="Flowers" style="width:auto;"> </picture> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت srcset
در HTML پشتیبانی میکنند یا خیر.
نام صفت | Chrome | Firefox | Opera | Safari | IE |
srcset | ۳۸٫۰ | ۳۸٫۰ | ۲۵٫۰ | ۹٫۱ | بله |
Free-Learn
نکات و توضیحات
نکته یا توضیح خاصی نیست فقط همونطور که در ابتدای این مطلب اشاره کردم – اگر از تگ <source> در درون تگ <picture> استفاده نمایید الزامی و ضروری است که از صفت SrcSet نیز در درون تگ <source> استفاده نمایید.