fill
prop will stretch the image to fill up 100% width of its parent container, ignoring the image’s true width and height.
width
and height
attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts.
{% include '@bolt-elements-image/image.twig' with {
fill: true,
attributes: {
alt: 'Alt text.',
src: 'path/image-800.jpg',
srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w',
sizes: '96vw',
width: 800,
height: 450,
},
} only %}
<img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="96vw" width=800 height=450 class="e-bolt-image e-bolt-image--fill">