window.addEventListener('load', function () { window.responsiveResizeObserver = new ResizeObserver((entries) => { entries.forEach(entry => { const imgWidth = entry.target.getBoundingClientRect().width; entry.target.parentNode.querySelectorAll('source').forEach((source) => { source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw'; }); }); }); document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => { responsiveResizeObserver.onload = null; responsiveResizeObserver.observe(responsiveImage); }); });

Voorbeeld nieuws item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum placerat turpis a feugiat. Nunc lorem purus, feugiat ut placerat tincidunt, rutrum eu eros. Vestibulum interdum erat et sagittis porttitor. Nulla facilisis neque nisi, ac dignissim dui finibus id. Etiam ac sem est. Fusce efficitur urna quis erat facilisis consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas blandit, lorem ac tincidunt tincidunt, libero eros gravida enim, quis posuere justo elit et nibh. Sed egestas venenatis nisi nec rutrum. Sed nec lorem quis massa aliquet pharetra at non velit.

Phasellus non rutrum leo, id ullamcorper nulla. Curabitur commodo eu sem ac dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit nulla, euismod sed placerat nec, egestas non metus. Phasellus venenatis quis dui eget eleifend. Pellentesque augue eros, tempus ac ultrices id, finibus non purus. Nulla quis vulputate augue, nec dapibus nunc. Nullam libero ex, mattis sed sagittis sit amet, efficitur quis nisi. Donec leo lacus, auctor nec mauris id, tincidunt sagittis enim. Morbi eget pharetra velit. Curabitur vulputate, urna id commodo vulputate, tortor nibh pharetra magna, ac blandit lorem sapien sit amet lectus. Donec eros nunc, cursus lacinia congue a, hendrerit id neque. Donec quis odio auctor, tristique ante eget, vestibulum purus. Proin rhoncus hendrerit nisl vitae tempor.