Shrink panel width to content width

Question

Is there a way for the panel to reduce the width of the panel to the width of the content. I hope the panel wraps the image in the body and then has a signature in the footer, but I don't like the panel covering the entire width of the surrounding div container.

I am currently using html:

<div class="panel panel-default">
  <div class="panel-body">
    <img class="img-responsive img-rounded center-block" alt="some alt text" src="a_path_to_a.jpg" />
  </div>
  <div class="panel-footer text-venter">A caption describing the image above.</div>
</div>

I am open to alternative ideas, I am new to bootstrap and web development in general.

Answer 1

use javascript or jquery if you want to set the width of the div to set the width of the image.

div, img. , .

<script type="text/javascript">
    $(document).ready(function () {
        var actualImgWidth = 0;
        $(".panel").each(function () {
            actualImgWidth = $("img", this).width();
            $(this).width(actualImgWidth);
        });
    });
</script>