Removing WordPress Attachment Image Width Size Attributes (Responsive Images)

If you are creating your own theme and notice that image attachments, specifically those with captions, are not responsive it is because the image width is being defined by the container div.

If you inspect the element in Developer Console (F12), you will see that the width is declared with an inline style in the div that has the class wp-caption.

<div id="attachment_847" style="width: 547px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-847" class="wp-image-847 size-full post-image lazyloaded" src="https://mysite.com/wp-content/uploads/myimage.com" alt="myimage" width="537">

<noscript>
<img
aria-describedby="caption-attachment-847" class="wp-image-847 size-full" src="//mysite.com/wp-content/uploads/myimage.com" alt="my image" width="537" height="450">
</noscript>

<p id="caption-attachment-847" class="wp-caption-text">My Image Caption</p>

</div>

To force the image in this div to become responsive, apply the following css in your style.css file:

div.wp-caption {
    max-width: 100%;
}
Available for Amazon Prime