10

fig/figcation の問題を解決するために 2 日間費やしましたが、役に立ちませんでした。

ユーザーが画像を送信できるDjangoアプリケーションがあり、フィギュアとフィグキャプションタグを使用して、キャプション付きの画像を表示しています。主な問題は、キャプションの幅が画像の幅を超えていることです。

画像を同じサイズのままにし、それに応じてキャプションを幅に合わせる方法を見つけようとしています。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重要なのは、可能であれば要素に何らかの種類を設定することです。そうすればimg、要素とテキストの両方が制約されたままになります。figure

fiddle の例を参照してください。

プログラムで幅を読み取っている場合

まず、これはこれ<figure width="{{story.pic.width_field}}">でなければなりません<figure style="width: {{story.pic.width_field}};">。

次に、この cssのみimgを実行します ( orには他に何も必要ありませんfigcaption。fiddle を参照してください)。

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

このフィドルが示すように、長いテキストを含む非常に小さな画像にはまだ問題があります。少なくともきれいに見えるようにするために、 の最小サイズを確認し、それが小さすぎる場合(imgたとえば、100pxwidthfiguremin-widthimgmax-width100px

于 2012-07-12T21:49:47.340 に答える
5

この問題の解決策は、TABLE と TABLECAPTION をいじることです。わずか 2 行のコードです。

このソリューションのライブ プレビューは、次の Web サイトで見ることができます: 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 に答える