Picture

Тагът <picture> в HTML

Опитайте сами »

Дефиниция и начин на използване

Тагът <picture> дава на уеб разработчиците повече гъвкавост при определянето на ресурси за изображенията.

Най-честата употреба на елемента <picture> ще бъде насочена към изкуството в тъй наречените отзивчиви дизайни. Вместо да имате едно изображение, което се мащабира или нагоре или надолу въз основа на ширината на изгледа, изображенията могат да бъдат проектирани така, че много от тях да запълват по-добре гледката във браузъра.

Елементът <picture> съдържа два различни тага: един или повече тагове <source> и един <img> таг.

Елементът <source> има следните атрибути:

  • srcset (задължително) - дефинира URL адреса на изображението, което да се показва
  • 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
  • type - определя типа MIME

Браузърът ще използва стойностите на атрибутите, за да зареди най-подходящото изображение. Браузърът ще използва първия елемент <source> който съвпада и ще игнорира всички следващи <source> тагове.

Елементът <img> се изисква като последния десен маркер на блока за деклариране. <picture> Елементът <img> се използва за осигуряване на обратна съвместимост за браузъри, които не поддържат елемента <picture> или ако не съвпадат нито един от <source> таговете.

Елементът <picture> работи подобно на елементите <video> and <audio>. Настройвате различни източници и първият източник, който отговаря на предпочитанията, е този, който ще се използва.

Поддръжка от браузърите

Номерата в таблицата уточняват първата версия на браузъра, която напълно поддържа елемента.

Element
<picture> 38.0 13.0 38.0 9.1 25.0

Разлики между HTML 4.01 и HTML5

Тагът <picture> е нов в HTML5.

Глобални атрибути

Тагът <picture> също така поддържа Глобални атрибути в HTML.

Event Атрибутите

Тагът <picture> също така поддържа Event Атрибутите в HTML.

Свързани страници

CSS уроци: CSS Responsive Design - Images