source
Definiert eine Quelle für ein <audio>, <video>, oder <picture> Element.
Beispiel:
<picture>
<source
media="(min-width: 800px)"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
sizes="33.3vw">
<source
srcset="/images/sunset-720.jpg 2x,
/images/sunset-360.jpg 1x">
<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
</picture> src
Die URL, unter der die Medien gehostet werden.
"/images/tiramisu.jpg"
Sie können eine relative URL verwenden.
"https://htmlreference.io/images/traffic.jpg"
Sie können eine absolute URL verwenden.
srcset
Definiert eine Liste von verschiedenen Quellen für das gleiche Medium. Der Browser wählt dann die beste Quelle aus.
"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
Sie können einen Breitendeskriptor wie 360w verwenden. Dieser Wert wird durch eine der Quellgrößen (definiert im Attribut sizes) geteilt, um die pixel density zu erhalten.
@html
sizes
Definiert eine Liste von verschiedenen Quell-Größen. Sie können jede von ihnen mit einer Medienabfrage kombinieren.
"(min-width: 800px) 1440px, 720px"
Der Browser verwendet das 1440px Bild (definiert in srcset), wenn der Viewport größer als 800px ist.
Andernfalls verwendet er das 720px.
@html
type
Legt den MIME-Typ der Quelle fest.
"image/jpg"
Sie können nur Audio-, Video- oder Bild-MIME-Typen verwenden.
media
Definiert eine Medienabfrage für eine <Bild>-Quelle.
"(min-width: 800px)"
Die Medien werden nur bei Ansichtsfenstern größer als 800px verwendet.
- Virtuelle private Netzwerke (VPN): Was steckt hinter dieser Technologie? - 30. August 2022
