ようやく目的の情報が見つかったのでメモ。元情報はこちら。
画像の幅を指定し、親要素のwidthに代入し、さらに画像にあてた説明文を画像のaltとして入れたい。 - ハリマカツユキ・旧技術ブログ
やりたいこと
- 量産を前提とする静的なサイトで、画像にキャプションをつけたい。
- 一枚の画像の下に、画像と同じ幅のキャプションテキストを入れる。
- キャプションテキストはaltなどから持ってくるのではなく、本文中にキャプションのテキストを入れる。
- 2枚の画像を横に並べ、その下に2枚分の幅を持つ1つのキャプションテキスト、というレイアウトもある。（下図）
">https://placehold.jp/100x40.png">
<p class="caption-text">2つの画像に対して1つのキャプションテキストを入れることもある。</p>
</div>
<p class="clear"> test</p>
jQuery(document).ready(function(){
$('.caption').each(function(i){
var captionimg = $('.caption > .caption-img').eq(i).outerWidth();
$('.caption').eq(i).css('max-width',captionimg);
});
});
これが前出の元情報の記事をもとにして作ったコード。他の情報源では.eq(i)が抜けていて、そのためページ内のすべてのキャプションの幅が同じになってしまうという問題に直面していた。
.cssに'max-width'を使っているのは、レスポンシブ対応するため。（imgタグにはwidth:auto; max-width:100%;のCSSをかけていて、画面幅が画像より狭くなってもはみ出さないようにしている。
.caption {
max-width: 100%;
box-sizing: content-box;
line-height: 1.2;
display: block;
}
.caption-img {
display: inline-block;
max-width: 100%;
}
.caption-img > img {
max-width: 100%;
}
.caption-text {
display: inline;
font-size: 14px;
}
その他
キャプションをつける画像が1枚だけの場合、jQueryを使うまでもなく、画像の親要素である.captionに display: table; width: 10px; というCSSだけでキャプション用のボックスを作ることができる。親要素のテーブルよりもコンテンツの画像の幅が大きいとき、テーブルのほうが広げられるという性質を利用している。
ただ、かなり無理やり感のあるやりかただし、複数枚の画像に対して一つのキャプションテキストをつけたい場合には使えなかった。（ボックス内で、最大の幅を持つ画像の幅までしか親要素のtableは広がらない）
Firefox45, IE8〜11（10以下は11の開発者モードによるエミュレーション）で表示の確認済み。Macではどうなるかわからない。
