He pasado dos días intentando resolver un problema de fig / figcation en vano.

Tengo una aplicación Django donde los usuarios pueden enviar imágenes y estoy usando las etiquetas de figura y figura para mostrar la imagen con un título adjunto. El problema principal es que el ancho del título excede el ancho de la imagen.

Estoy tratando de encontrar una manera para que la imagen permanezca del mismo tamaño y la leyenda se alinee con el ancho correspondiente. También estoy usando Twitter-Bootstrap. Estoy abierto a todas las soluciones. Cualquier entrada, experiencia o consejo muy apreciado.

ACTUALIZADO: Este es el código de plantilla HTML real y 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;}