在图形标签中的图像上定位和对齐图形标记的宽度 [英] Centering and aligning width of figcaption tag on image in figure tag

问题描述

我花了两天时间试图解决一个无花果问题，无济于事。

I've spent two days now attempting to resolve a fig/figcation issue to no avail.

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

I have a Django application where users are able to submit images and I'm using the figure and figcaption tags to display the image with an accompanying caption. The main issue is that the caption width exceeds the picture width.

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

I'm trying to figure out a way for the image to remain the same size and the caption to line up in width accordingly. I'm using Twitter-Bootstrap as well. I'm open to all solutions. Any input, experience or advice greatly appreciated.

UPDATED：这是实际的HTML模板代码和CSS：

UPDATED: This is the actual HTML template code and 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;}

推荐答案

原始解决方案

Original Solution

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 */
}

图上 img 的 max-width 元素，如果可以，那么它将保持它和文本的约束。

The key is to set some kind of max-width for the img on the figure element if you can, then it will keep both it and the text constrained.

See an example fiddle.

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

First, this <figure width="{{story.pic.width_field}}"> should be this <figure style="width: {{story.pic.width_field}};">.

其次，只执行 img 或 figcaption ; see fiddle ）：

Second, do only this css (nothing else needed for img or figcaption; see fiddle):

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

仍然会有问题，因为这个小提琴显示。为了使它至少看起来干净，你可以检查 img 的一些最小尺寸，如果它太小（比如说， 100px ），而不是在图上设置 width / code>到 img 大小并将 max-width 设置为您的阈值 100px ，例如这个小提示显示。

Really small images with long text are still going to have issues, as this fiddle shows. To make it at least look clean, you might check for some minimum size of the img and if it too small (say, 100px), then instead of setting width on the figure set min-width to the img size and set a max-width to your threshold of 100px like this fiddle shows.

这篇关于在图形标签中的图像上定位和对齐图形标记的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！