100% کامل شده تا
به‌روزرسانی شده در: ۱۸ روز پیش

عنصر Picture در اچ‌تی‌ام‌ال (HTML <picture> Element)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial‏ | تصاویر(تغییرمسیر از عنصر picture در html)
پرش به ناوبری پرش به جستجو


عنصر <picture> امکان نمایش تصاویر در دستگاه‌های مختلف یا با اندازه‌های متفاوت را برای ما فراهم می‌کند.[۱]



عنصر <picture> در HTML

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

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

هر عنصر <source> ویژگی‌هایی دارد که مشخص می‌کند چه زمانی تصویر آنها مناسب‌ترین تصویر است.

مثال

تصاویر مختلف را در صفحه نمایش‌های با سایز متفاوت نمایش می‌دهد:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=۱٫۰">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

Responsive demo.svg

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


چه زمانی از عنصر Picture استفاده شود (When to use the Picture Element)

دو هدف اصلی برای عنصر <picture> وجود دارد:

۱. پهنای باند

اگر یک صفحه نمایش یا دستگاه کوچک دارید، لازم نیست فایل تصویری بزرگی بارگذاری شود. مرورگر اولین عنصر <source> را با مقادیر ویژگی مطابق استفاده می‌کند، و هر یک از عناصر بعدی را نادیده می‌گیرد.

۲. پشتیبانی از قالب‌بندی

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

مثال

مرورگر از اولین قالب‌بندی تصویر که می‌شناسد استفاده می‌کند:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

<p>The picture element can be used when the image format is not supported by all devices.</p>

<p>The device will use the first image format it supports, and ignore the rest of the images.</p>

</body>
</html>

Responsive demo.svg

توجه: مرورگر از اولین عنصر <source> با مقادیر ویژگی مطابق استفاده می‌کند، و عناصر <source> بعدی را نادیده می‌گیرد.


برچسب‌های تصویر در اچ‌تی‌ام‌ال (HTML Image Tags)


منابع آموزشی