Skip to content

Container-images is a lightweight library (0.6KB gzipped) which allows you to use container queries for images.

License

Notifications You must be signed in to change notification settings

felixranesberger/container-images

Repository files navigation

Container queries for images

NPM version

Container-images is a lightweight library (0.6KB gzipped) which allows you to use container queries for images.

Unlike HTML responsive images, which are implemented with srcset, these images are based on the container size of their parent container and not the screen size and are therefore much easier to maintain.

Installation

npm i container-images

Typescript

import containerImages from 'container-images'

const images = Array.from(
  document.querySelectorAll<HTMLPictureElement>('[data-container-images]'),
)

if (images.length !== 0)
  containerImages(images)

HTML

<picture data-container-images="">
    <!-- 
        srcset and media attributes are required
        data-source-x: image url for an image with a width of x, 
            container-images will choose the best fitting image automatically.
     -->
    <source
        srcset="#"
        media="(min-width: 0)"
        data-source-400="https://via.placeholder.com/400x200.webp, https://via.placeholder.com/800x400.webp 2x"
        data-source-500="https://via.placeholder.com/500x250.webp, https://via.placeholder.com/1000x500.webp 2x"
        data-source-600="https://via.placeholder.com/600x300.webp, https://via.placeholder.com/1200x600.webp 2x"
        data-source-700="https://via.placeholder.com/700x350.webp, https://via.placeholder.com/1400x700.webp 2x"
    >

    <!-- Necessary fallback image -->
    <img
            src="https://via.placeholder.com/700x350.webp"
            width="700"
            height="350"
            alt="Placeholder image"
    >
</picture>

License

MIT License © 2023 Felix Ranesberger

About

Container-images is a lightweight library (0.6KB gzipped) which allows you to use container queries for images.

Resources

License

Stars

Watchers

Forks

Packages

No packages published