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

basic example

Container Example

container example

Classes

• vclResponsiveImage
• vclResponsiveImageContainer

Modifiers

Variables

• --responsive-image-container-color

Demo

example.html on GH-pages.