این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت SrcSet در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت SrcSet در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت SrcSet در HTML
صفت srcset صفتی است که در درون تگ <Source> مورد استفاده قرار میگیرد و با استفاده از آن میتوانیم یک یا چندین تصویر رو در اندازه های مختلف صفحه نمایش تعریف و به نمایش درآوریم.
اگر از تگ <source> در درون تگ <picture> استفاده شود، الزامی و ضروری است که از صفت SrcSet نیز در درون تگ <source> استفاده شود.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <source> | <img> |
Free-Learn
مثال از صفت SrcSet در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ img
گفتیم وقتی اندازه صفحه نمایش کمتر از ۷۰۰ پیکسل بود عکس ۱۲۰w رو نشون بده و وقتی اندازه صفحه نمایش بیشتر از ۷۰۰ پیکسل بود عکس ۲۷۸w رو نشون بده
|
1 2 3 4 5 |
<body> <img srcset="files/demo-sizes.jpg 120w , files/demo-sizes.jpg 278w" sizes="(max-width: 700px) 278px"> </body> |
مثال شماره ۲ : استفاده در تگ Source
در مثال زیر گفتم وقتی اندازه صفحه نمایش بزرگتر از ۶۵۰ پیکسل شد عکس pic-1.jpg رو نشون بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد عکس pic-3.jpg ، و وقتی هم اندازه بین ۴۶۵ تا ۶۵۰ بود عکس pic-2.jpg رو نشون بده.
|
1 2 3 4 5 6 7 8 9 |
<body> <picture> <source media="(min-width: 650px)" srcset="files/pic-1.jpg"> <source media="(min-width: 465px)" srcset="files/pic-2.jpg"> <img src="files/pic-3.jpg"> </picture> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت srcset در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| img | بله | بله | بله | بله | بله |
| source | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 2 |
<img srcset="URL"> <source srcset="URL"> |
Free-Learn
جدول مقادیر صفت SrcSet در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| URL | آدرس یا مسیر فایل بصورت مطلق یا نسبی نمونه آدرس مطلق : https://test.com/my_image.jpg نمونه آدرس نسبی : files/my_image.jpg |
Free-Learn
نکات و توضیحات
- اگر از تگ <source> در درون تگ <picture> استفاده نمایید الزامی و ضروری است که از صفت SrcSet نیز در درون تگ <source> استفاده نمایید.
