I think I got the reason.
Setting max-width: 100% does NOT prevent the image from scaling up beyond its original size, it just instructs the browser to shrink the image when the container width is smaller than the image.
It is the width default value (auto) who tells the browser to show the image in its original size as long as possible (i.e. when the container width is not smaller than the image).
Combining these two, the image will shrink but not scaled up responsively.