Question

Is it possible to have in an HTML page an image and immediately beneath it a text field that has the same width as the image?

Yes, I know this is possible. But here comes the interesting part:

I want that when I am resizing (horizontally) the browser window, both the image and its heading re-size synchronously to the same width.

Is this possible to specify completely using CSS?

Or, if not possible with CSS only, can this be done with Javascript in an efficient way?

Answer 1

Do you mean something like this?

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%;
}​

This is a really basic example of how to use CSS to have the img tag and p tag have the same percentage width.