media attribute | media property

A media query list to be used within a picture element.

Syntax

HTML
<element media="p" ... >

 

Property values

Type: String

A valid media query list.

Standards information

Examples

In the below picture element, the media attribute is specified as "(min-width: 600px)". This attribute ensures that an image from this source's srcset will be selected as long as the width of the viewport is wider than 599px.


<picture>
   <source media="(min-width: 600px)" srcset="large.png, large-double.png 2x">
   <img src="fallback.png">
</picture>


In the below picture element, any viewport with a portrait orientation will have an image selected from the first source's srcset. If the width of the viewport is greater than 899px but not in portrait orientation, an image from the second source's srcset will be selected. If the viewport is less than 900px and wider than 319px but not in portrait orientation, an image from the third source's srcset will be selected. If the viewport meets none of the source media attributes, the provided fallback img element is selected.


<picture>
   <source media=”(orientation: portrait)” srcset=”medium-vert.png 300w, large-vert.png 600w, extra-large-vert.png 1000w”>
   <source media="(min-width: 900px)" srcset="large.png 1000w, extra-large.png 2000w">
   <source media=”(max-width: 899px) and (min-width: 320px)” srcset="medium.png 600w, large.png 1000w” >
   <img src="fallback.png">
</picture>

See also

source

 

 

Show: