Images

FrontAlign provides a set of image utilities covering responsive behaviour, fixed-size thumbnails, object-fit and object-position control, and semantic figure markup. All global image resets are applied automatically — no extra class needed for basic responsive images.

All image utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	Effect	Common use
Global reset	`img`, `svg`, `iframe`, `figure`	`max-width: 100%; height: auto`	Applied automatically — no class needed.
Block image	`image`	`display: block; max-width: 100%; height: auto`	Remove inline baseline gap inside flex or grid containers.
Thumbnail	`thumbnail-image`, `is-xsmall`, `is-medium`, `is-large`, `is-xlarge`, `is-2xlarge`	`--thumbnail-size: 2rem – 12.5rem`	Avatars, user icons, product thumbnails.
Object fit	`object-fit-cover`, `object-fit-contain`, `object-fit-fill`, `object-fit-scale-down`, `object-fit-none`	`object-fit: cover \| contain \| fill \| scale-down \| none`	Card covers, product images, media crops.
Object position	`object-position-center`, `object-position-top`, `object-position-bottom`, `object-position-left`, `object-position-right`	`object-position: center \| top \| bottom \| left \| right`	Focal point control for cropped images.

Usage

FrontAlign applies the following resets globally — no class required.

<!-- Responsive image — no class needed -->
<img src="photo.jpg" alt="Photo">

<!-- Captioned figure -->
<figure>
  <img src="photo.jpg" alt="Mountain view">
  <figcaption>A view from the summit at sunrise.</figcaption>
</figure>

Block image

Use .image when you need a block-level, fully responsive image with an explicit reset. This is useful inside flex or grid containers where inline baseline alignment causes unexpected gaps.

<img src="banner.jpg" alt="Banner" class="image">

Thumbnails

.thumbnail-image renders a square, cropped, rounded image at a fixed size. The size is controlled by the --thumbnail-size CSS variable, making all six size variants consistent and easy to override.

<!-- Default thumbnail -->
<img src="avatar.jpg" alt="User" class="thumbnail-image">

<!-- Size variants -->
<img src="avatar.jpg" alt="" class="thumbnail-image is-xsmall">
<img src="avatar.jpg" alt="" class="thumbnail-image is-medium">
<img src="avatar.jpg" alt="" class="thumbnail-image is-large">
<img src="avatar.jpg" alt="" class="thumbnail-image is-xlarge">
<img src="avatar.jpg" alt="" class="thumbnail-image is-2xlarge">

Override --thumbnail-size directly on the element for one-off sizes.

<img src="avatar.jpg" alt="" class="thumbnail-image" style="--thumbnail-size: 5rem;">

Object fit

Control how an image or video fills its container. Apply alongside a defined width and height.

<!-- Cropped cover image -->
<img src="photo.jpg" alt="" class="object-fit-cover" style="width: 100%; height: 200px;">

<!-- Contained product image — no cropping -->
<img src="product.jpg" alt="" class="object-fit-contain" style="width: 200px; height: 200px;">

<!-- Video fills its container -->
<video src="clip.mp4" class="object-fit-cover" style="width: 100%; height: 300px;"></video>

Object position

Set the focal point of a cropped image. Use together with object-fit-cover for best results.

<!-- Portrait: keep face in frame by anchoring to top -->
<img src="portrait.jpg" alt="" class="object-fit-cover object-position-top"
     style="width: 100%; height: 200px;">

<!-- Landscape: anchor to left for a specific composition -->
<img src="landscape.jpg" alt="" class="object-fit-cover object-position-left"
     style="width: 100%; height: 300px;">

Global reset reference

Element	Applied styles
`img`	`max-width: 100%; height: auto; vertical-align: middle; border-style: none`
`svg`	`vertical-align: middle`
`iframe`	`border: 0`
`figure`	`display: inline-block`
`figure figcaption`	`font-size: 0.875em; color: var(--muted); margin-top: 0.5rem`

Thumbnail size scale

Class	Size	Border radius
`thumbnail-image is-xsmall`	`2rem (32px)`	`0.25rem`
`thumbnail-image`	`3rem (48px)`	`0.375rem`
`thumbnail-image is-medium`	`4rem (64px)`	`0.5rem`
`thumbnail-image is-large`	`6rem (96px)`	`0.625rem`
`thumbnail-image is-xlarge`	`9rem (144px)`	`0.75rem`
`thumbnail-image is-2xlarge`	`12.5rem (200px)`	`1rem`

Object-fit scale

Class	CSS	Description
`object-fit-cover`	`object-fit: cover`	Fills container, crops overflow — most common.
`object-fit-contain`	`object-fit: contain`	Fits entirely inside, letterboxes if needed.
`object-fit-fill`	`object-fit: fill`	Stretches to fill — may distort.
`object-fit-scale-down`	`object-fit: scale-down`	Smaller of contain or none.
`object-fit-none`	`object-fit: none`	Renders at intrinsic size, no scaling.

Object-position scale

Class	CSS	Anchor
`object-position-center`	`object-position: center`	Center (default).
`object-position-top`	`object-position: top`	Top edge.
`object-position-bottom`	`object-position: bottom`	Bottom edge.
`object-position-left`	`object-position: left`	Left edge.
`object-position-right`	`object-position: right`	Right edge.

Real-world examples

Avatar row

<div class="is-flex gap-2">
  <img src="a.jpg" alt="" class="thumbnail-image">
  <img src="b.jpg" alt="" class="thumbnail-image">
  <img src="c.jpg" alt="" class="thumbnail-image">
</div>

Card with cropped cover image

<div class="card">
  <div style="height: 180px; overflow: hidden;">
    <img src="cover.jpg" alt="" class="image object-fit-cover object-position-center"
         style="height: 100%;">
  </div>
  <div class="p-3">Card body</div>
</div>

Product image — no cropping

<div style="width: 200px; height: 200px; background: #fff;">
  <img src="product.png" alt="Product"
       class="object-fit-contain object-position-center"
       style="width: 100%; height: 100%;">
</div>

Captioned figure

<figure>
  <img src="chart.png" alt="Q3 Revenue Chart" class="image">
  <figcaption>Q3 2026 revenue breakdown by region.</figcaption>
</figure>

Remove baseline gap in flex container

<!-- Without .image: inline gap appears below the image -->
<div class="is-flex">
  <img src="photo.jpg" alt="">
</div>

<!-- With .image: display: block eliminates the gap -->
<div class="is-flex">
  <img src="photo.jpg" alt="" class="image">
</div>

Usage notes

All img, svg, iframe, and figure elements receive global resets automatically — you do not need to add any class for basic responsive images.
Use .image inside flex or grid containers to eliminate the inline baseline gap that appears below images without display: block.
Use thumbnail-image for consistent avatar and icon sizing across the UI. Override --thumbnail-size inline for one-off sizes rather than creating new modifier classes.
Always pair object-fit-cover with a defined width and height on the element or a constrained parent — without a fixed dimension the utility has no visible effect.
Combine object-fit-cover with an object-position-* class to keep the most important part of the image visible after cropping — especially useful for portrait photos.
object-fit-contain is the correct choice for product images where the full subject must be visible without cropping.
object-fit-fill stretches the image to match the container exactly and will distort the aspect ratio — use it only when distortion is acceptable.
figcaption inherits the muted color token automatically — no extra class is needed for caption styling.