Aspect ratio

<k-aspect-ratio>

• kirby/panel/src/components/Layout/AspectRatio.vue

Creates a layout element in the specified ratio

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

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