it-roy-ru.com

Центрирование и выравнивание ширины тега figcaption на изображении в теге figure

Я потратил два дня, пытаясь решить проблему фига/фикус, но безрезультатно.

У меня есть приложение 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;}
8
Why Not

Оригинальное решение

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 для img в элементе figure, если это возможно, тогда он будет ограничен как для текста, так и для текста.

см. Пример скрипки .

Если вы программно читаете ширину

Во-первых, этот <figure width="{{story.pic.width_field}}"> должен быть этим <figure style="width: {{story.pic.width_field}};">.

Во-вторых, сделайте только этот css (больше ничего не нужно для img или figcaption; см. Fiddle ):

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

У действительно маленьких изображений с длинным текстом все еще будут проблемы, как показывает эта скрипка . Чтобы он хотя бы выглядел чистым, вы можете проверить некоторый минимальный размер img и, если он слишком мал (скажем, 100px), то вместо установки width для figure установите min-width в размер img и установите max-width в свой порог из 100px как эта скрипка показывает .

9
ScottS

Решение этой проблемы - поиграть с 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 */
}
4
alboth - undkonsorten.com

В 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;
}
0
lifebalance