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>
Last updated