JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgs" caption="true">
  
   <img src="http://goo.gl/uRvjRS" width="200" height="250" alt=""/>
   <figcaption>
    <h3>IMGs Caption 1</h3>
   </figcaption>
  
  </div>
  
  <div class="imgs" caption="true">
  
   <img src="http://goo.gl/uRvjRS" width="100" height="100" alt=""/>
   <figcaption>
    <h3>IMGs Caption 2</h3>
   </figcaption>
  
  </div>
  
  <div class="imgs" caption="true">
  
   <img src="http://goo.gl/uRvjRS" width="300" height="200" alt=""/>
   <figcaption>
    <h3>IMGs Caption 3</h3>
   </figcaption>
  
  </div>

CSS

*{margin:0;padding:0;}
.imgs{position:relative;}
figcaption{position:absolute;top:0;
    background-color:rgba(0,0,0,0.4);}
figcaption h3{text-align:center;}

JavaScript

$(function() {
    $("div[caption='true']").each(function() {
        var image = $(this).find('img')
        var width = image.width();
        var height = image.height();

        $(this).find('figcaption').width(width).height(height);
    });
});