برچسب <picture> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
یک کانتینر برای منابع تصویری متعدد تعریف می‌کند
معرفی شده در نسخهٔ:۵
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

چگونه از برچسب <picture> استفاده کنیم:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>


تعریف و کاربرد

The <picture> tag gives web developers more flexibility in specifying image resources.

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

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

رایج‌ترین کاربرد عنصر <picture> برای مدیریت آثار هنری در طراحی‌های تعاملی (responsive) است. به جای آنکه یک تصویر داشته باشیم که مقیاس آن بر اساس پهنای میدان دید (viewport) زیاد یا کم شود، از چندین تصویر می‌توان استفاده کرد تا میدان دید (viewport) مرورگر را به شکلی بهتر پر کنند.

The <picture> element holds two different tags: one or more <source> tags and one <img> tag.

عنصر <picture> دارای دو برچسب متفاوت است: یک یا چند برچسب <source> و یک برچسب <img>.

The <source> element has the following attributes:

عنصر <source> ویژگی‌های زیر را دارد:

  • srcset (required) - defines the URL of the image to show
  • srcset (الزامی است) - URL تصویری را که قرار است نمایش داده شود تعریف می‌کند
  • media - accepts any valid media query that would normally be defined in a CSS
  • media - هر کوئری رسانهٔ معتبری را که معمولاً در CSS تعریف می‌شود، می‌پذیرد
  • sizes - defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
  • sizes - یک توصیف‌کنندهٔ پهنا، یک کوئری رسانه با توصیف‌کنندهٔ پهنا، یا یک فهرست با کاما جدا شده از کوئری‌های رسانه با توصیف‌کنندهٔ پهنا، را تعریف می‌کند
  • type - defines the MIME type
  • type - نوع MME را تعریف می‌کند

The browser will use the attribute values to load the most appropriate image. The browser will use the first <source> element with a matching hint and ignore any following <source> tags.

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

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.

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

The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used.

عنصر <picture> مشابه عنصرهای <video> و <audio> عمل می‌کند. شما منبع‌های مختلفی را تنظیم می‌کنید، و اولین منبعی که متناسب با اولویت‌ها باشد آنی است که مورد استفاده قرار می‌گیرد.

پشتیبانی مرورگر

عددهای موجود در جدول، نخستین نسخهٔ مرورگری را مشخص می‌کنند، که بطور کامل از عنصر پشتیبانی می‌کند.

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<picture> ۳۸٫۰ ۱۳٫۰ ۳۸٫۰ ۹٫۱ ۲۵٫۰

ویژگی‌های سراسری

همچنین برچسب <picture> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <picture> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

صفحات مرتبط

آموزش CSS: طراحی تعاملی CSS - تصاویر (CSS Responsive Design - Images)

منابع آموزشی