آموزش تگ picture در HTML
آموزش تگ picture در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ picture در HTML به صورت کامل آشنا بشید.
تگ picture در HTML
تگ picture مثل یک تگ کانتینر ( Container ) یا یک ظرف، برای نگهداری ۱ یا چندین عکس استفاده میشود ، که با استفاده از آن میتوانیم یک یا چند عکس را در اندازه های مختلف صفحه نمایش به نمایش در بیاوریم.
توضیحات بالا به این معنی هستند که مثلا به سیستم دستور داده میشود. اگر اندازه صفحه فلان بود، عکس شماره 1 را نمایش بده و اگه اندازه صفحه بهمان بود شماره 2 را نشان بده. اصطلاحا در حوضه طراحی سایت به این موضوع واکتش گرایی یا رسپانسیو میگویند که برای نمابش درست آینم ها و مهم تر از آن، برای سئوی سایت بسیار ضروری و حائز اهمیت است.
مثال از تگ picture در HTML
در ادامه دوره آموزشی html css پروژه محور به یک مثال از تگ picture میپردازیم تا بیشتر و بهتر با کارایی این تگ آشنا شوید…
مثال : استفاده کردن از تگ Picture برای نمایش چندین عکس در اندازه های مختلف در صفحه نمایش
در رابطه با توضیحات مثال زیر، لارم به ذکر است که ما با استفاده از کد های CSS به سیستم دستور میدهیم وقتی اندازه صفحه نمایش بزرگتر از ۶۵۰ پیکسل شد، عکس pic-1.jpg را نشان داده شود و در صورت کاهش اندازه صفحه نمایش به کمتر از ۴۶۵ پیکسل ، عکس pic-3.jpg ، و وقتی اندازه صفحه نمایش بین ۴۶۵ تا ۶۵۰ بود عکس pic-2.jpg نشان داده شود…
<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>
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید
پشتیبانی مرورگرها از تگ Picture
در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ picture در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
پشتیبانی تگ picture از صفات و رویدادهای عمومی
تگ picture قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- بهتر است برای مشخص نمودن چندین عکس در اندازه های مختلف از تگ source استفاده کنیم.
- منظق مرورگر ها بدین شکل است که اول عکس های داخل تگ source را نشان میدهند ، و در صورت اینکه بنا به هر دلیلی عکس ها نمایش داده نشوند ، عکس ها موجود در تگ img جایگرین آنها میشود.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید