首页 文章

图形标签中图像上的figcaption标签的居中和对齐宽度

提问于
浏览 次
8

我花了两天时间试图解决无花果/无花果问题无济于事 .

我有一个Django应用程序，用户可以在其中提交图像，我正在使用图形和figcaption标签来显示带有附带 Headers 的图像 . 主要问题是 Headers 宽度超出图片宽度 .

我试图找出一种方法让图像保持相同的大小和 Headers ，以相应地排列宽度 . 我也在使用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;}
css django html5 width center

3 回答

  • 0

    这个问题的解决方案是使用TABLE和TABLECAPTION . 它只有2行代码 .

    您可以在网站上看到此解决方案的实时预览：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 */
}
    回复于
  • 9

    在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;
}
    回复于
  • 4

    原始解决方案

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

    关键是如果可以的话，在 figure 元素上为 img 设置某种 max-width ，那么它将保持它和文本的约束 .

    See an example fiddle .

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

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

    第二，只做这个css（ img 或 figcaption ; see fiddle不需要其他任何东西）：

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

    带有长文本的真正小图像仍然会出现问题，as this fiddle shows . 为了使它至少看起来干净，您可能会检查 img 的某个最小尺寸，如果它太小（例如， 100px ），则不要将 figure 上的 width 设置 min-width 设置为 img 并将 max-width 设置为阈值 100px 喜欢this fiddle shows .

    回复于

相关问题