Image

Image creates the illusion of grayscale through carefully designed dither patterns. When rendered on 1-bit (black and white only) displays, these patterns create an illusion of different shades of gray by using specific arrangements of black and white pixels.

Dithering

Use the class image-dither to dither an image.

TRMNL Logo Image 
<img class="image image-dither rounded" src="path to the image file">

Object Fit

Control how images are displayed when not shown in their original aspect ratio.

Options

  • Fill: The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
  • Contain: The image keeps its aspect ratio, but is resized to fit within the given dimension.
  • Cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
Plugin icon
Fill
Plugin icon
Contain
Plugin icon
Cover
TRMNL Logo Object Fit Options 
<img class="image image--fill" src="path to image">
<img class="image image--contain" src="path to image">
<img class="image image--cover" src="path to image">

Text

Control text color, alignment and formatting

Previous

Image Stroke

Legible images when displayed on shaded backgrounds

Next
Framework Index