<p>
    เปลี่ยนขนาด หน้าต่าง <a href="https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working" target="_blank">แล้วโหลดใหม่</a>เพื่อดูการเปลี่ยนแปลง.<br>
    Resize the window <a href="https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working" target="_blank">and reload</a> to see changes.
</p>
<div id="debug"></div>
<div id="resizable-container" class="img-container">
    <img 
         srcset="https://dummyimage.com/200x100/eeeeee/999999 200w,
                 https://dummyimage.com/300x150/eeeeee/999999 300w,
                 https://dummyimage.com/600x300/eeeeee/999999 600w,
                 https://dummyimage.com/800x400/eeeeee/999999 800w,
                 https://dummyimage.com/1000x500/eeeeee/999999 1000w,
                 https://dummyimage.com/1200x600/eeeeee/999999 1200w"
         sizes="(min-width: 1265px) 1200px,
                (min-width: 1060px) 1000px,
                (min-width: 860px) 800px,
                (min-width: 650px) 600px,
                (min-width: 350px) 300px,
                200px"
         src="https://dummyimage.com/200x100/eeeeee/999999"
         alt="dummy image">
</div>
<button id="reset-img-container">คืนค่าเดิมของขนาด container. Reset container size.</button>
<p>
    Thanks dummy image to <a href="https://dummyimage.com/" target="_blank">dummyimage.com</a>
</p>
<p>
    ดูในแบบที่ใช้แท็ก <a href="https://codepen.io/ve3/full/qBpKwBE" target="_blank"><code>picture</code></a>.<br>
    View responsive image that use <a href="https://codepen.io/ve3/full/qBpKwBE" target="_blank"><code>picture</code></a> tag.
</p>

/* make <img> responsive size but max width 100% not larger. */
img {
    height: auto;
    max-width: 100%;
}

#debug {
    margin: 0 0 20px;
}

.img-container {
    background-color: rgba(255, 255, 0, .1);
    border: 3px dashed #ccc;
    margin: 0 0 20px;
    overflow: auto;
    padding: 10px;
    resize: both;
    text-align: center;
}
@media (min-width: 800px) {
    .img-container {
        background-color: rgba(255, 0, 0, .1);
    }
}
function debugSize() {
    let debugE = document.getElementById('debug');
    let imgContainerE = document.querySelector('.img-container');
    if (imgContainerE && debugE) {
        debugE.innerHTML = 'window size: ' + window.innerWidth + 'x' + window.innerHeight + ' pixels.<br>' +
            'container size: ' + imgContainerE.offsetWidth + 'x' + imgContainerE.offsetHeight + ' pixels.<br>';
    }
}


window.onload = () => {
    debugSize();

    // reset container.
    let resetContainerBtn = document.getElementById('reset-img-container');
    if (resetContainerBtn) {
        resetContainerBtn.addEventListener('click', (e) => {
            e.preventDefault();
            let imgContainerE = document.querySelector('.img-container');
            imgContainerE.style = '';
            debugSize();
        });
    }
    // end reset container.

    setInterval(function() {
        debugSize();
    }, 2000);
}

window.onresize = (e) => {
    debugSize();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.