Максимальная ширина: 100% не работает с изображениями с помощью srcset ⇐ Html

[Anonymous]

У меня есть это:

Код: Выделить всё

.wrapper {
max-width: 1200px;
}
img {
max-width: 100%;
}

Код: Выделить всё

Hola
[img]http://s30.postimg.org/tosov034h/small.png[/img]
       srcset="http://s30.postimg.org/72ndi9pe9/large.png 1024w,
http://s30.postimg.org/ybyqwrqhd/medium.png 640w,
http://s30.postimg.org/tosov034h/small.png 320w"
alt="owl">

Я не думаю, что это работает во фрагменте, поэтому вы можете проверить это здесь: http://codepen.io/vandervals/pen/ZbOMNR
Дело в том, что при загрузке изображения размером 1024 пикселя я ожидаю, что max-width: 100% начнет работать и ограничит отображение изображения с фактической шириной (1024 пикселя). Это не то, что происходит, поскольку он продолжает расти, поскольку вместо этого он имел ширину: 100% и останавливался на 1200 пикселях, что является максимальной шириной оболочки.
Почему это не работает? Что мне следует сделать, чтобы ограничить размер изображения максимальным размером до максимального реального размера?

Подробнее здесь: https://stackoverflow.com/questions/327 ... ith-srcset