Responsive Image - Test v2

index.html

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

<details class="hint">
	<summary>Änderungen</summary>
	<ol>
		<li>768er Bild aus der Source entfernt. Wurde nicht gezogen.</li>
		<li>width und height bei der source mit dem 1440er Bild abgeglichen.</li>
		<li>sizes in source geändert und den w-Wert beim zweiten Bild in Source an die echte Breite angepasst.</li>
	</ol>
</details>

<details class="info">
	<summary>Info</summary>
	<p>Von einer großen Browserbreite schmaler werden triggert keine neuen Bilder. Wenn man aber mit kleinem Viewport beginnt, kommen neue Bilder. Dann ist auch das 320er Bild erwünscht. Beim kleiner Schieben wird es nie gezogen. </p>
	<p>Das 480er Bild wird schon sehr früh gezogen, bei etwa 350px Breite. Das 320er Bild hat also prinzipiell fast keine Chance.</p>
</details>

<details class="info">
	<summary>Bilderbreiten</summary>
	<ol>
		<li>320</li>
		<li>480</li>
		<li>768</li>
		<li>1440</li>
		<li>1080</li>
	</ol>
</details>
<!--
<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-v2.markdown

Responsive Image - Test v2

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;
	font-family: system-ui, sans-serif;
}
.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;
    }
.hint {
    background-color: #e1e1e1;
    padding: 10px;
    margin: 40px 20px;
    width: fit-content;
}
.info {
    background-color: #b0eba8;
    padding: 10px;
    margin: 40px 20px;
    width: fit-content;
}

details {
	cursor: pointer;
}