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

 

Related posts

اموزش html
28 آبان 1402

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


Read more
اموزش html
26 مهر 1402

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


Read more
اموزش html
26 مهر 1402

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


Read more
اموزش html
25 مهر 1402

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


Read more

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


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

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


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

خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 32625682-013
[email protected]

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

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


ارتباط با ما

خرید هاست

هاست لینوکس

هاست سی پنل

هاست وردپرس

هاست اقتصادی

هاست نمایندگی

هاست ویندوز

سایر خدمات

ثبت دامنه ملی و بین المللی

سرور مجازی آلمان

سرور مجازی فنلاند

گواهینامه SSL

قالب آماده وردپرس رایگان

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