Search code examples
imageresponsive-designresponsivenessresponsive-images

<source> media attribute - width of container rather than screen?

I'm using the <picture></picture> tag to responsively display an image after assessing the size of the container it's in.

Some example code:

<picture>
            <source media="(max-width: 70px)" srcset="IMAGE_URL">
            <source media="(min-width: 71px) and (max-width: 170px)" srcset="IMAGE_URL">
            <source media="(min-width: 171px) and (max-width: 270px)" srcset="IMAGE_URL">
            . . .
            <img src="IMAGE_URL" alt="An image">
</picture>

However, the <source media="(MEDIA_QUERY)" ... > part in an implementation of the format above considers the width of the entire screen, rather than the container that the <picture></picture> is currently inside.

Help on this is appriciated.

Solution

  • There is unfortunately no standard way (yet) to base responsive behavior upon a container instead of the browser viewport.

    There are community efforts around Container Queries, but nothing has yet been defined, that could eventually become a standard.

    There are several JavaScript libraries, like EQCSS, trying to provide solutions, but requiring JavaScript for a presentation —hence CSS— job is often not a good idea.

    You can also look at CSS Conditions, but it also requires JavaScript.