I'm attempting to use the figure and figcaption tags to varying success. Someone suggested a great CSS method to get rid of the figure margin and also link up the caption with the image.

The problem: all images shrink to an extremely small size.

Not sure how to rectify this. These are user-submitted images using Django so they vary in size. But currently, using these fixes, all of these shrink with a caption that does fit the image but defeats the purpose as it results in a tiny image with a caption with an even width.

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


figure {margin:0; display:table; width:1px;} 

figcaption {display:table-row;}