Background Size

Background-size affects how background images fill their containing elements. While measurements can be declared explicitly to size an image, the values that seem most reusable are v-contain and v-cover.

Contain

Directive v-contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.

<template>
  <div v-contain></div>
</template>

Cover

Directive v-cover will make sure the entire element is covered. But won’t guarantee that the entire image will be shown.

<template>
  <div v-cover></div>
</template>

Reference

• Background Size Source Docs | Tachyons
• background-size | MDN