@vcl/vcl
Version:
The whole VCL in one package
36 lines (20 loc) • 706 B
Markdown
# [VCL](https://vcl.github.io/vcl/) responsive-image
Let images fill up the available horizontal space of its container if it is at
least as wide.
## Features
The `responsive-image` just sets the `max-width` of the image to 100%.
The optional `responsive-image-container` 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](/demo/example-basic.html)
### Container Example
[container example](/demo/example-container.html)
## Classes
- `responsive-image`
- `responsive-image-container`
## Modifiers
## Variables
- `$responsive-image-container-color`