• صفحه اصلی
  • هاست حرفه ای
    • هاست مخصوص وردپرس
    • هاست سی پنل آلمان
    • هاست سی پنل ایران
    • هاست نمایندگی
    • هاست دانلود
    • هاست ربات تلگرام
    • هاست آزمایشی
  • سرور مجازی
    • سرور مجازی پر سرعت SSD
    • سرور مجازی با هارد HDD
  • قالب وردپرس vip رایگان
    • فروشگاهی
    • همه منظوره
    • شرکتی
    • مشاهده همه موضوعات
  • گواهی SSL
  • دامنه
    • جستجو و ثبت دامنه
    • هزینه ثبت دامنه ها
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
    • کسب درآمد در آپ وب
ورود به سایت
✕

تگ picture در HTML

اموزش html

آموزش تگ picture در HTML

تگ <picture> در HTML چه کاربردی دارد؟

تگ <picture> در HTML به توسعه دهندگان وب انعطاف پذیری بیشتری در تعیین منابع تصویر می دهد.

تگ  <picture> تگی است مانند یک قالب یا یک محفظه برای نگهداری یک  یا چندین تصویر.

با استفاده از آن میتوان یک یا چندین تصویر را در حالت ها و سایز های مختلف در صفحه وب خود نمایش دهید.

یکی از استفاده‌های رایج تگ <picture> در جهت دیزاین وبسایت برای طراحی واکنش‌گرا است.

برای آشنایی بیشتر با تنظیم تصاویر در HTML میتوانید به آموزش زیر مراجعه کنید:

افزودن و تنظیم تصاویر با HTML

تعریف و کاربرد تگ picture در HTML

عنصر <picture> شامل دو تگ داخلی می باشد: یک یا چند تگ <source> و یک تگ <img>

مرورگر اولین عنصر <source> را در تگ <picture> بررسی می کند و در صورت تطابق سایز تصویر را اعمال میکند.

تگ <img> در انتهای تگ picture به عنوان آخرین تگ لازم است قرار داده شود. وظیفه تگ <img> پشتیبانی از مرورگر‌هایی است که قابلیت پشتیبانی از تگ picture را ندارند و یا هیچ تگ <source> تعیین (و یا همخوانی ندارد) نشده است.

صفت source

دو ویژگی srcset و media در داخل تگ source قرار دارند:

ویژگی  srcset: این خاصیت اجباری است و تعیین کننده آدرس (URL) تصویر برای نمایش.

ویژگی media: حاوی کوئری شما برای چیزهایی مثل ارتفاع ، عرض( هر نوع کوئری معتبری که در CSS تعریف شود ) است

را به همین تگ source که ساختید اضافه کنید.

نمونه:

1
2
3
4
5
<picture>
  <source media="(min-width: 650px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_food.jpg">
  <source media="(min-width: 465px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_car.jpg">
  <img src="https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg">
</picture>

 

مثال:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 
<h3>لطفا این صفحه را تغییر اندازه دهید</h3>
 
<picture>
  <source media="(min-width: 650px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_food.jpg">
  <source media="(min-width: 465px)" srcset="https://upweb.ir/wp-content/uploads/2021/09/img_car.jpg">
  <img src="https://upweb.ir/wp-content/uploads/2021/09/img_girl.jpg">
</picture>
 
</body>
</html>

نتیجه:

1.در مثال زیر اندازه صفحه بر روی %100 تنظیم است که تصویر غذا را مشاهده می کنید.

 

در مثال زیر اندازه صفحه بر روی %110 تنظیم است که تصویر  ماشین را مشاهده می کنید.

 

زمان استفاده از تگ picture

دو هدف اصلی برای عنصر <picture>  وجود دارد:
1. پهنای باند
اگر صفحه یا دستگاه کوچکی دارید ، نیازی به بارگذاری یک فایل تصویری بزرگ نیست. مرورگر از اولین عنصر source>   برای مطابقت با ویژگی استفاده می کند و بقیه تصاویر را نادیده می گیرد.
2. پشتیبانی از فرمت
برخی از مرورگرها یا دستگاه ها ممکن است از همه فرمت های تصویر پشتیبانی نکنند. با استفاده از عنصر <picture> ، می توانید تصاویری از همه فرمت ها را اضافه کنید  و مرورگر از اولین فرمت مورد استفاده خود استفاده می کند و بقیه تصاویر را نادیده می گیرد.
مثال:
دستگاه از اولین فرمت تصویری(png،jpg،gifو…) که پشتیبانی می کند استفاده می کند و بقیه تصاویر را نادیده می گیرد.
1
2
3
4
5
<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

 

مطالب مرتبط

اموزش html
3 خرداد 1401

آموزش طرح بندی و تکنیک های چیدمان عناصر HTML


ادامه مطلب
اموزش html
28 اردیبهشت 1401

آموزش استفاده از تگ Head در HTML بصورت جامع


ادامه مطلب
اموزش html
14 اردیبهشت 1401

آموزش آدرس دهی به فایل ها در HTML بصورت جامع


ادامه مطلب

آپ وب خانه امن رویاهای آنلاین شما


خرید هاست و ثبت دامنه پیش نیاز برای ایجاد سایت میباشد. سرعت بارگزاری هاست و اپتایم نقش مهمی در سئو سایت دارد. آپ وب تلاش میکند بهترین کیفیت هاست را برای شما ایجاد کند.

آپ وب با بیش از 8 سال سابقه در کنار شماست.

نماد اعتماد الکترونیکی


خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 33854475-013
info@upweb.ir

نیاز به پشتیبانی دارید؟

اگر سوالی دارید از طریق تیکت به پشتیبان مطرح نمایید.


ارتباط با ما
© 2022 تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت