Javascript 如何使同步后的图像及其文本标题在调整大小时/之后始终占据相同的宽度

是否可能在HTML页面中有一个图像，并在其正下方有一个与图像宽度相同的文本字段

是的，我知道这是可能的。但有趣的是：

我希望当我调整浏览器窗口的大小（水平）时，图像和标题都会同步地重新调整到相同的宽度

这是否可以完全使用CSS进行指定

或者，如果只使用CSS是不可能的，那么使用Javascript可以有效地实现这一点吗？

你的意思是

HTML:

---

这是如何使用CSS使

img

标记和

p

标记具有相同的百分比宽度的一个非常基本的示例。

您尝试了什么？你有没有考虑过你可以使用CSS宽度的百分比？请在这里发布你的代码或现场演示，我们希望看到你的表现，然后我们可以告诉你解决方案……。只需为文本字段和图像设置相同的宽度？@Ivan：我试着放置图像和文本（位于其自身的

div

中）在公共父级

div

中，并为此父级

div

指定“显示：内联块”。这似乎可行，但图像没有调整大小（缩小）当调整/减小宽度时，它会被裁剪。我尝试的另一件事是为包含文本的

div

设置maxwidth——这根本不会产生想要的效果。@Sevensacat，在调整大小以减小宽度时，仅指定相同的固定宽度会裁剪图像和文本div。：（伊万，这几乎是我需要的，但是我需要文本与图像对齐，并用彩色背景占据一个最好的区域（比如说黑底白字）因此，该区域与图像本身具有相同的垂直边界——在调整大小期间的任何时刻。这可能吗？@好奇的是，我建议您阅读一些CSS教程，因为您所要求的是CSS可以处理的基本内容。我进行了搜索，但没有找到类似的内容——这两个方面都有问题调整图像大小或文本大小，但不是以同步方式进行。请提供指向此类材料的链接，好吗？

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

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