صفحه اول >> دانستنی ها >>
آموزش تگ picture در HTML - راهنمای کار با تصاویر واکنش گرا در html
برای نمایش تصاویر در طراحی واکنش گرا از تگ picture استفاده می شود. در این حالت تصاویر با پهنای متفاوت در این تگ قرار گرفته و هنگام نمایش سایت در ...
برای نمایش تصاویر در طراحی واکنش گرا از تگ picture استفاده می شود. در این حالت تصاویر با پهنای متفاوت در این تگ قرار گرفته و هنگام نمایش سایت در موبایل، تبلت، مونیتور و... تصویر مناسب نمایش داده می شود.
عنصر picture شامل چند تگ source و یک تگ img می باشد.
در این تگ مرورگر اولین تصویر مناسب با پهنای مرورگر معرفی شده در عنصر source را انتخاب کرده و نمایش می دهد و اگر هیچ کدام از این تصاویر مناسب نبود، عنصر img نمایش داده می شود.
مثال تگ picture در HTML
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
پشتیبانی مرورگرها
تگ <picture> در مرورگرهای کروم 38، فایرفاکس 38، اپرا 25، سافاری 9.1، اینترنت اکسپلورر 13 به بالا پشتیبانی می شود.
| مرورگر | کروم | فایرفاکس | اپرا | سافاری | اینترنت اکسپلورر / اج |
| پشتیبانی | 38 | 38 | 25 | 9.1 | 13 |
پشتیبانی از ویژگی ها و رویدادهای عمومی
تگ <picture> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
موضوع: آموزش HTML
نظرات نظرات تا اطلاع ثانوی غیر فعال است.