custom-responsive-image demo

Strict aspect ratio + object-fit (contain / cover / auto) + automatic small-image handling. Resize the window to watch them adapt.

Auto · cover

1600×900 photo in a 16:9 box → cover, with an icon+text badge.

Auto · contain

320×240 photo in a 16:9 box → contain, text-only light badge.

Forced cover

objectFit: 'cover', with an icon-only badge.

Forced contain

Portrait in a 1:1 box, text+icon badge (reversed order).

Small icon · auto

64px icon in a 1:1 box. Auto-detected as small → contained + centered.

Small icon · wide box

64px icon in a 3:1 box. Contained, vertically + horizontally centered.

Forced small

128px image with small: true — stays contained in a 1:1 box.

No aspect ratio

Fluid image — width 100%, height follows the natural ratio.

Badge variants

Live controls for position, theme, order and icon/text — applied via update({ badge }).

Global threshold

320×240 image in a 4:3 box. Toggle the global smallImageThreshold.