Skip to content

Kirby 3.6.0

Aspect ratio

<k-aspect-ratio>

Creates a layout element in the specified ratio

<k-ratio ratio="3/2">
  <div>Ratio!</div>
</k-reatio>

Props

Prop Type Default Description
cover
boolean
If true, the content will fill the element's entire space/ratio
ratio
string
Supported values:
e.g. 1/1, 16/9 or 4/5
The ratio can be defined freely with the format widthFraction/heightFraction. The ratio will be calculated automatically.

Slots

Slot Description
default Content

CSS classes

.k-aspect-ratio