22

画像キャプションの幅を画像と同じにするにはどうすればよいですか? 今、私は次のコードを持っています:

<div class="image">
    <img src="foo.jpg" alt="" />
    <div>This is the caption.</div>
</div>

私は多くのこと（フローティング、絶対配置など）を試しましたが、キャプションが長い場合、多くの行に行くのではなく、常に div が広くなります。問題は、画像の幅 (またはキャプションの長さ) がわからないことです。この使用テーブルを解決する唯一の方法はありますか?

4

6 に答える 6

39

したがって、問題は、img の幅がわからず、img のキャプションが img の幅を超える可能性があることです。この場合、キャプションの幅を img の幅に制限する必要があります。

私の場合、display:table親要素に適用し、次のようにキャプション要素に適用display:table-captionしました。caption-side:bottom

<div class="image" style="display:table;">
    <img src="foo.jpg" alt="" />
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>
于 2013-10-01T09:49:21.090 に答える
6

display:table;たとえば、任意の初期幅を適用できます。width:7px;親ブロックのようfigureに、すべてが期待どおりに機能します!

これがライブデモです: http://jsfiddle.net/blaker/8snwd/

このソリューションの制限は、IE 7 以前ではサポートされておらずdisplay:table;、IE 8 では doctype が である必要があること!DOCTYPEです。

ソース:

于 2012-08-10T19:15:12.533 に答える
2

キャプションが長すぎることが問題の場合は、いつでも使用できます


div.image {
    width: 200px; /* the width you want */
    max-width: 200px; /* same as above */ 
}
div.image div {
    width: 100%;
}

キャプションは静的なままです。また、タグ名はimageではなくimgです。

または、画像の幅を検出したい場合は、jQuery を使用できます。


$(document).ready(function() {
    var imgWidth = $('.image img').width();
    $('.image div').css({width: imgWidth});
});

そうすれば、画像の幅を取得してから、キャプションの幅をそれに設定します。

于 2011-02-12T17:47:37.627 に答える
-1

画像のdivラッパーを設定してみることができますdisplay:inline-block

http://jsfiddle.net/steweb/98Xvr/

キャプションが長い場合は固定幅にするか、jsで.imageのdiv幅を設定するしか解決策がありません。私は純粋なCSSソリューションについて考えようとしていますが、それは難しい課題だと思います:)

于 2011-02-12T19:00:08.507 に答える