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标签具有相同的百分比宽度。