Aspect Ratio

SAspectRatio keeps its content (an image, video, map, or embed) at a fixed aspect ratio regardless of the container width, so the layout does not jump while media loads. The ratio prop is the width divided by the height.

Basic usage

<template>
  <SAspectRatio :ratio="1">…</SAspectRatio>
  <SAspectRatio :ratio="4 / 3">…</SAspectRatio>
  <SAspectRatio :ratio="16 / 9">…</SAspectRatio>
</template>

With media

The content is usually an <img>/<video>/<iframe>: the component crops it to the frame (object-fit: cover) while keeping the proportions.

<template>
  <SAspectRatio :ratio="16 / 9">
    <img
      src="/cover.jpg"
      alt="Cover"
    />
  </SAspectRatio>
</template>

API

Props

Name	Type	Default	Description
ratio	number	1	Target aspect ratio (width / height). For example 16 / 9 for widescreen media, 1 for a square, 4 / 3 for a classic frame.

Slots

Name	Description
default	Content with a fixed aspect ratio (image, video, map, placeholder).