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 |