Forum
Problem with picture element on mobile displays
I have an image that covers 100% of the page (not a background-image) in all display sizes. Here's my code of image.html:
<img src="<perch:content type="image" id="image" label="Image" help="Upload or select an image" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Description of this image" title="true" />"
sizes="100vw"
srcset="<perch:content type="image" id="image" label="Image" width="320" /> 320w,
<perch:content type="image" id="image" label="Image" width="480" /> 480w,
<perch:content type="image" id="image" label="Image" width="768" /> 768w,
<perch:content type="image" id="image" label="Image" width="1024" /> 1024w" />
Perch saves the 4 sizes but on all mobile devices it always shows the smallest of them, 320px. Any idea? Thanks a lot!
Are you getting the HTML you expect? I'm not sure if your issue is with Perch or with support for the picture element.
Yes, I do.
So this doesn't seem like a Perch issue then. If Perch is creating valid HTML for you, with the right images you'll need to have a look at browser support to see if what you are trying to do should work.
There is not full support for the picture element and srcset attribute as yet https://caniuse.com/#search=picture
Ok, you're probably right. However Chrome 43 doesn't do it right either while resizing... What picture-element solution using in Perch do you recommend to get the most benefit right now? Outside of Perch I am using «source srcset». Thanks!
You can use anything you like with Perch - use the solution that works best for you. Perch just generates the HTML you use in your template.
Ok, thanks.