10

我花了两天时间试图解决无花果/无花果问题。

我有一个 Django 应用程序，用户可以在其中提交图像，并且我正在使用 figure 和 figcaption 标签来显示带有标题的图像。主要问题是标题宽度超过了图片宽度。

我试图找出一种方法让图像保持相同的大小，并且标题相应地在宽度上对齐。我也在使用 Twitter-Bootstrap。我对所有解决方案持开放态度。非常感谢任何输入、经验或建议。

更新：这是实际的 HTML 模板代码和 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;}
4

3 回答 3

10

原始解决方案

figure .image {
    width: 100%;
}

figure {
    text-align: center;
    display: table;
    max-width: 30%; /* demo; set some amount (px or %) if you can */
    margin: 10px auto; /* not needed unless you want centered */
}

关键是如果可以的话，为max-width元素设置某种类型，然后它会同时保持它和文本的约束。imgfigure

看一个例子 fiddle。

如果您以编程方式读取宽度

首先，<figure width="{{story.pic.width_field}}">应该是 this <figure style="width: {{story.pic.width_field}};">。

其次，只做这个 css （imgor不需要其他东西figcaption；见 fiddle）：

figure {
    text-align: center;
    margin: 10px auto; /* not needed unless you want centered */
}

正如这个小提琴所示，带有长文本的非常小的图像仍然会有问题。为了使它至少看起来干净，您可以检查 的一些最小尺寸，如果它太小（img例如100px，widthfiguremin-widthimgmax-width100px

于 2012-07-12T21:49:47.340 回答
5

这个问题的解决方案是使用 TABLE 和 TABLECAPTION。这只是两行代码。

您可以在网站上看到此解决方案的实时预览：http: //www.sandrasen.de/projektgebiete/kienheide/

figure { 
  display: table; 
}

figcaption { 
  display: table-caption; /* aligns size to the table of the figure
  caption-side: bottom /* makes the caption appear underneath the image/figure */
}
于 2014-08-06T10:35:45.600 回答
0

在 HTML5 中，事情非常简单：

HTML

<figure>
    <img src="..." >
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="..." >
    <figcaption>Caption 2</figcaption>
</figure>

CSS

figure{
  display: inline-block;
}

/* optional, use as required */
figcaption { 
  max-width: 30%;
  caption-side: bottom;
}
于 2018-09-30T02:23:27.057 回答