Image

The image reset provides minimal styles to semantic HTML5 images.

Styles

The styles applied to every image ensures:

  1. Its width never exceeds the boundaries of its parent container.
  2. Its aspect ratio is preserved.

Examples

Small

This example shows an image smaller than the main column width, so its size and aspect ratio are preserved without resizing.

Random image from picsum.photos

Large

This example shows an image larger than the main column width, so its width is constrained to the main column's width while preserving its aspect ratio.

Random image from picsum.photos