Responsive Image - Test

index.html

<h1>Responsive Images </h1>
<h2>Banner image</h2>
<div class="wrapper">
  <div class="image banner-image">
    <picture>
        <source media="(min-width: 1200px)"
            srcset="https://dummyimage.com/768x432/444/fff 768w,https://dummyimage.com/1440x810/a20000/fff 1440w,https://dummyimage.com/1080x608/fd8700/000 1920w"
            sizes="(min-width: 1200px) 1000px" width="768" height="432">
        <img src="https://dummyimage.com/320x180/ddd&text=Fallback"
            srcset="https://dummyimage.com/320x180/ddd 320w,https://dummyimage.com/480x270/ccc 480w,https://dummyimage.com/768x432/444/fff 768w"
            sizes="(min-width: 768px) 730px, calc(100vw - 32px)" class="flexible"
            data-copyright="Foto: dpa Bildfunk, picture alliance/Silas Stein"
            alt="ein toller Alt-Text"
            title="title kombiniert alt und data-copyright"
            width="320" height="180">
    </picture>
</div>
</div>

<h2>1er Teaser</h2>
<div class="wrapper">
  <picture>
    <img src="https://dummyimage.com/480x270/ccc&text=fallback"
srcset="https://dummyimage.com/320x180/ddd 320w,https://dummyimage.com/480x270/ccc 480w,https://dummyimage.com/768x432/444/fff 768w,https://dummyimage.com/1440x810/a20000/fff 1440w"
sizes="(min-width: 1728px) calc((1728px / 3) * 2), (min-width: 1440px) calc(((100vw - 128px) / 3) * 2), (min-width: 1024px) calc(((100vw - 96px) / 3) * 2), (min-width: 768px) calc(((100vw - 64px) / 3) * 2), (min-width: 640px) calc(((100vw - 80px) / 3) * 2), calc(100vw - 32px)"
class="flexible" data-copyright="Foto: dpa Bildfunk, picture alliance/Silas Stein"
            alt="ein toller Alt-Text"
            title="title kombiniert alt und data-copyright"
width="320" height="180" decoding="async" loading="lazy">
</picture>
</div>

responsive-image-test.markdown

Responsive Image - Test

A Pen by Jens Grochtdreis on CodePen.

License.

script.js

let b = document.querySelector('body');
b.dataset.width = b.offsetWidth + 'px';

// Eventlistener auf Fenstergrößeänderung
window.addEventListener('resize', () => {
	b.dataset.width = b.offsetWidth + 'px';
});     

style.css

.wrapper {
  width: 94%;
  margin: 20px auto;
  padding: 10px;
  background-color: #fff;
}
body {
  background-color: #ccc;
	position: relative;
}
.flexible {
  width: auto;
  height: auto;
  max-width: 100%;
}
h1 {text-align: center;}

    [data-width]::before {
        content: attr(data-width);
        position: absolute;
        top: 0;
        right: 0;
				background-color: #a20000;
        color: #fff;
        font-size: 20px;
        padding: 4px 8px;
        border-bottom-left-radius: 4px;
        z-index: 10;
    }