Image as background

To maintain all the functionalities of the plugin in the case of images that are part of an element background, you can use the object-cover attribute; this will allow the image to fit the size of the parent using the object-fit: cover CSS property.

The image will be centered and cropped to fit the parent element size.

<template>
  <header class="header">
    <ProgressiveImage
      object-cover
      src="https://picsum.photos/id/1080/1980/1080"
    />
  </header>
</template>

<style>
.header {
  width: 100%;
  height: 500px;
}
</style>