Forum

Thread tagged as: Question, Problem

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!

Martin Stettler

Martin Stettler 0 points

  • 6 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

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.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

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!

Rachel Andrew

Rachel Andrew 394 points
Perch Support

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.