Why are my responsive-image dimensions substantially larger than its containing element?

Cloudinary provides a Javascript based Responsive mechanism that modifies the width of each and every image on your page to fit its containing element. This may save you unnecessary bytes and loading time, while maintaining the visual quality of your images.

Diving down into the implementation of this mechanism, shows that the resolved width is calculated based on the width of the <img> nearest ancestor that has a physical width property. Such DOM element must be a block-level one. More information on Block vs. Inline level elements is available here.

In some scenarios the layout of a web-page must be forced to support such mechanism by surrounding the <img> tag with block-level element to allow Cloudinary JS plugin to provide a proper results.