我试图使用数字和figcaption标签来取得不同的成功 . 有人提出了一个很好的CSS方法来摆脱图形边缘,并将 Headers 与图像链接起来 .
问题是:所有图像都缩小到极小的尺寸 .
不知道如何纠正这个问题 . 这些是使用Django的用户提交的图像,因此它们的大小不同 . 但是目前,使用这些修复程序,所有这些修复都缩小了一个符合图像的 Headers ,但却失去了目的,因为它会产生一个带有宽度均匀 Headers 的小图像 .
{% 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;}