javascript - サイズ変更時/サイズ変更後に常に同じ幅を占めるように画像とそのテキスト見出しを同期させる方法

Question

HTML ページに画像を配置し、そのすぐ下に画像と同じ幅のテキスト フィールドを配置することはできますか?

はい、私はこれが可能であることを知っています。しかし、ここに興味深い部分があります。

ブラウザー ウィンドウのサイズを (水平方向に) 変更しているときに、画像とその見出しの両方が同期して同じ幅にサイズ変更されるようにしたい。

これは CSS を使用して完全に指定することは可能ですか?

または、CSS だけでは不可能な場合、これを Javascript で効率的に行うことはできますか?

Answer 1

このようなことですか？

HTML:

<img src="http://placehold.it/350x150" /><br/>
<p>Lorem ipsum dolor sit amet... </p>

CSS:

body {
    text-align: center;
}
img, p {
 margin:0px auto;
    width: 50%;
}​

これは、CSS を使用してimgタグとpタグのパーセンテージ幅を同じにする方法の非常に基本的な例です。