کاربرد عناصر چند رسانه ای، آموزش تگ Picture در html

کار با تصاویر در html:

در این بخش، به معرفی تگ <picture> و همچنین نکاتی برای سرچ تصویر،معرفی سایت هایی برای دانلود تصویروآیکون می پردازیم.

<picture> : برای درج تصویراستفاده می شود،همچنین با استفاده ازاین تگ می توانیم نمایش تصویر در دستگاه های مختلف (موبایل،تبلت و...) را کنترل کنیم.در این تگ، ازتگ های <img> و<source>  استفاده می شود.

<source> : آدرس تصویر را مشخص می کند.این تگ دارای صفات زیر می باشد:

• srcset : آدرس تصویر را در این قسمت وارد می کنیم.
• media : که شامل  minimum و maximum سایز دستگاه را مشخص می کند.
• type : نوع mime تصویر، فیلم و صدا را مشخص می کند.mime شناسایی نوع فایل توسط مرورگرها می باشد.

شکل دستوری <picture> : 
 

<picture>
         <source srcset=”pic.webp” media=”(min-width:1000px)” type=”image/jpeg”/>           <source srcset=”pic.png” media=”(min-width:700px)” type=”image/png”/>
         <img src:”pic.webp” alt=”car”/>
</picture>

ممنون که تا اینجا با ما همرا بودید،برای یادگیری و درک بهتر مطالب، می توانید ویدئو آموزشی این بخش را خریداری کنید.