آموزش صفت SrcSet در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت SrcSet در HTML با من همراه باشید.

آموزش صفت SrcSet در HTML

Free-Learn

صفت SrcSet در HTML

صفت srcset صفتی است که در درون تگ <Source> مورد استفاده قرار میگیرد و با استفاده از آن میتوانیم نحوه نمایش یک تصویر را در حالت های مختلف (در اندازه صفحه نمایش های مختلف) مشخص و یا تعریف نماییم.

اگر از تگ <source> در درون تگ <picture> استفاده شود – الزامی و ضروری است که از صفت SrcSet نیز در درون تگ <source> استفاده شود.

Free-Learn

عناصری که توسط این صفت پشتیبانی می شوند

این صفت را میتوان در عناصر/تگ های زیر بکار برد.

<source>

Free-Learn

مثال از صفت SrcSet در HTML

در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.

در مثال زیر با استفاده از صفت media در تگ Source – تعریف کردم که وقتی اندازه عرض صفحه ی مرورگر بیشتر از ۶۵۰ پیکسل شد عکس (Logo_test.png) رو نمایش بده و اگر اندازه عرض بیشتر از ۴۶۵ پیکسل شد بیا و عکس (girls_test.jpg) رو نمایش بده.

لطفا بروی دکمه ی (امتحان کنید) کلیک نمایید تا بصورت آنلاین مثال زیر را مشاهده نمایید و همچنین لطفا اندازه صفحه را تغییر دهید تا تصاویر موجود در مثال زیر را در اندازه های مختلف مشاهده نمایید.


امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت srcset در HTML پشتیبانی میکنند یا خیر.

نام صفت Chrome Firefox Opera Safari IE
srcset ۳۸٫۰ ۳۸٫۰ ۲۵٫۰ ۹٫۱ بله

Free-Learn

نکات و توضیحات

نکته یا توضیح خاصی نیست فقط همونطور که در ابتدای این مطلب اشاره کردم – اگر از تگ <source> در درون تگ <picture> استفاده نمایید الزامی و ضروری است که از صفت SrcSet نیز در درون تگ <source> استفاده نمایید.

Free-Learn