Eu passei dois dias tentando resolver uma questão de figo / figcation sem sucesso.

Eu tenho um aplicativo Django onde os usuários podem enviar imagens e eu estou usando as tags figure e figcaption para exibir a imagem com uma legenda. A questão principal é que a largura da legenda excede a largura da imagem.

Eu estou tentando descobrir uma maneira para a imagem permanecer do mesmo tamanho e a legenda para alinhar na largura em conformidade. Estou usando o Twitter-Bootstrap também. Estou aberto a todas as soluções. Qualquer entrada, experiência ou conselho muito apreciado.

ATUALIZADO: Este é o código do modelo HTML real e CSS:

        <div class="span4 offset2">
                {% if story.pic %}
                    <h2>Image</h2> 
                    <figure width="{{story.pic.width_field}}">
                    <img class="image"src="{{ story.pic.url }}" width="{{story.pic.width_field}}" alt="some_image_alt_text"/>
                    {% if story.caption %}
                        <figcaption>
                                                {{story.caption}}
                        </figcaption>
                    {% endif %}
                    </figure>
                {% endif %}
        </div>


 image {height:auto;}

 figure {margin:0; display:table;} 

figcaption {display:table-row;
max-width: 30%;
font-weight: bold;}