I have the following html:

```
<div class="media">
  <img src="/img/sample.jpg">
  <div class="caption">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
  </div>
</div>

```

The size of the image will shrink/grow with the size change of the browser. The caption should be positioned over the image and within the boundary of the image. The width of the caption must change when the image size changes.

The image is large enough to hold the text. The image size is not known in advance. The image must retain original width when the browser's viewport width is larger than the image's actual width. I hope the caption is positioned at the bottom of the image.

If there is any css solution, that will be fantastic.

Thanks for any input!