title: Fitting an image and corresponding span to parent div
body: <p>I have a div of fixed width and height.
  I want to put and image and caption to it (using img and figurecaption) such that they both never exceeds the dimensions of the parent.</p>
  
  <p>I tried this : 
  `</p>
  
  <pre><code>parent-&gt; 
  height: 100px;
  width: 100px;
  margin: 0;
  img-&gt;
  display: block;
  height: 100%;
  width: 100%;
  figurecaption-&gt;
  text-align: center
  </code></pre>
  
  <p>`</p>
  
  <p>When the image is of greater size than the specified height and width, the caption goes outside. How to deal with this. Thanks.</p>