LayoutCSS Docs Showcase
  • Showcase
  • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher
  • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index
  • ratio

    ...

    The ratio utility defines the proportions of an element.

    Imagine you want an image in a 16/9 format. To achieve that you just need to add `ratio="16/9"` to your image.

    You can set ratio as fraction (like 16/9) or as decimal number (like 0.3).

    This proportions will be kept on every screen-size.