Remove inline width from figure

Question

I add an image with caption to my page and need to increase <figure> width. But wordpress is adding an inline width.

[caption id="attachment_44" align="alignnone" width="216"]<a href="image path"><img src="image path" alt="caption" width="216" height="95" class="size-full wp-image-44" /></a> caption [/caption]

So, the DOM look like this:

<figure id="attachment_43" aria-labelledby="figcaption_attachment_43" class="wp-caption alignnone" style="width: 216px">
   <a href="">
       <img src="http://localhost/bordados/website/wp-content/uploads/2014/02/homeThumb01.jpg" alt="Caption" width="216" height="95" class="size-full wp-image-43">
   </a>
   <figcaption id="figcaption_attachment_43" class="wp-caption-text">Caption.</figcaption>
</figure>

I try to remove width="216" from code, but the caption desappear.

How I remove this inline style?

Answer 1

SOLVED

I'm using roots theme. So I open cleanup.php file and comment/remove this line:

$attributes .= ' style="width: ' . (esc_attr($attr['width']) + 10) . 'px"';

Answer 2

You can override the width with a filter. Any falsy value will remove the attribute from the <figure>.

add_filter('img_caption_shortcode_width', '__return_false');

Answer 3

This may not be best practice, but you could select the css in a style sheet with

.wp-caption {
                width: 100% !important;
            }

this will override the in-line style.

Answer 4

 $(document).ready(function(){  
    $("figure").removeAttr("style");
});