HTML5 <picture>

2 posts (showing 1-2)
dbaechtel@gmail.cm

Market Level 0Community Level 0
1 posts

I have two PNG pictures. I want to display the Long one on larger (computer) monitors > 1024px. I want to display the Mod one on smaller (phone) screens.

The code is always choosing the Long image, even on smaller phone screens. Why?

How do I make this work correctly?

Code: "[" substituted for "<"

[picture>

  [source media="(max-device-width: 1024px)"

  sizes="90vw" type="image/png"

  srcset="Images/CC Logo Mod.png">

  [img src="Images/CC Logo Long.png"

  sizes="90vw" type="image/png"

  srcset="Images/CC Logo Long.png 224w, Images/CC Logo Long.png 150w" alt="CC for WVA" />

[/picture> 

     

posted 2017-05-04T12:36:49-07:00 | edited 2017-05-04T12:48:04-07:00
FGL_Dave

FGL AdminCommunity Level 4
318 posts

A couple of suggestions:

- Try using max-width instead of max-device-width

- Define two source tags, one with media="(max-width: 1023px)" and one with media="(min-width: 1024px)" (each with the respective image in them).

- I wouldn't suggest using the 'vw' unit inline like this, it's not all that well supported across browsers yet, and is probably a little overkill for this purpose; instead consider just using width: 90% (this isn't directly equivalent to 90vw as it depends on the width of the container, but its a lot more standard)

- Your img tag doesn't need or use sizes, type, or srcset. Consider setting a width or height on that also

Hopefully that helps!

posted 2017-05-06T06:21:18-07:00