Aspect Ratio

Keep media at a consistent proportion. Try the live example, then switch to Code to copy its Vue source.

Preview

<script setup>
import { NbAspectRatio } from '@neobrut-vue/core'
</script>

<template>
  <NbAspectRatio :ratio="16 / 9"><div style="height:100%;background:#648ff5;display:grid;place-items:center">16:9</div></NbAspectRatio>
</template>

Usage

Import NbAspectRatio from @neobrut-vue/core and its stylesheet once in your app. The Code tab above contains a complete example.