vcl-responsive-image

Let images fill up the available horizontal space of its container if it is at least as wide

Usage no npm install needed!

<script type="module">
  import vclResponsiveImage from 'https://cdn.skypack.dev/vcl-responsive-image';
</script>

README

VCL responsive-image

Let images fill up the available horizontal space of its container if it is at least as wide.

Features

The vclResponsiveImage just sets the max-width of the image to 100%.

The optional vclResponsiveImageContainer can be used to:

Show a message while loading.
Pre-occupy the space for an unloaded image re-flows and content jumping.
Show a fall back message.

Usage

Basic Example

Container Example

container example

Classes

vclResponsiveImage
vclResponsiveImageContainer

Modifiers

Variables

--responsive-image-container-color

Demo

example.html on GH-pages.