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

Cloudinary provides a Javascript-based library that modifies the width of every image on your page to fit its containing element. This responsive solution may reduce bandwidth usage and loading time, while maintaining the visual quality of your images.

Diving deeper into the implementation of this mechanism, the resolved width is calculated based on the width of the <img>'s 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 webpage must be forced to support this mechanism by surrounding the <img> tag with a block-level element to allow Cloudinary's JS plugin to provide proper results.