HTML <picture> etikett

Definition och användning

<picture> etiketten gör det möjligt för webbutvecklare att vara mer flexibla när de specificerar bildresurser.

<picture> det mest vanliga användningsområdet för elementet är i responsiv design för att styra bild定向. Det är möjligt att designa flera bilder för att bättre fylla webbläsarens viewport, snarare än att skala upp eller缩小一个图像 baserat på viewportbredden.

<picture> elementet innehåller två etiketter: en eller flera <source>-etiketten och en <img>-etiketten

Webbläsaren kommer att leta efter den första <source>-element som matchar med mediamätningen och aktuella viewportbredden, och sedan kommer den att visa det korrekta bilderna (specificerade i srcset-attributet). <img>-elementet fungerar som <picture> Elementets sista underelement är nödvändigt och används som en reservval när ingen source-etikett matchar.

Tips:<picture> elementets funktionalitet är lika med <video> och <audio> Liknande. Du kan ställa in olika källor, och den första källan som passar dina förinställningar kommer att användas.

Se också:

HTML handledokumentation:HTML <picture> 元素

CSS handledokumentation:CSS Responsiv Design - Bild

实例

<picture> 标签的使用方法:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

亲自试一试

全局属性

<picture> 标签还支持 HTML 中的全局属性

事件属性

<picture> 标签还支持 HTML 中的事件属性

浏览器支持

表中的数字注明了首个完全支持该标签的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0