• پاسخگویی سوالات در خصوص خرید هاست و ثبت دامنه
  • 013-32625682
upweblogo2upweblogoupweblogo2upweblogo2
  • صفحه اصلی
  • هاست لینوکس ( Cpanel )
    • هاست سی پنل آلمان
    • هاست سی پنل ایران (پیشنهاد ویژه)
    • هاست ارزان و اقتصادی
    • هاست نمایندگی
    • هاست بهینه شده وردپرس (سی پنل)
  • هاست ویندوز ایران
  • سرور مجازی
    • سرور مجازی SSD آلمان
    • سرور مجازی فنلاند
  • قالب وردپرس
    • فروشگاهی
    • شرکتی
    • همه قالب ها
  • دامنه
    • جستجو و ثبت دامنه
    • هزینه ثبت دامنه ها
    • گواهینامه 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
28 آبان 1402

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده


ادامه مطلب
اموزش html
26 مهر 1402

آموزش کار با نمادها (Symbols) در HTML


ادامه مطلب
اموزش html
26 مهر 1402

آموزش موجودیت ها یا Entities در Html بصورت جامع


ادامه مطلب
اموزش html
25 مهر 1402

عناصر معنایی یا Semantic Elements در HTML


ادامه مطلب

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


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

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

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


مجوز وزارت صنعت و معدن

خرید هاست



ارسال تیکت

ارتباط با ما


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

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

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


ارتباط با ما

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