Javascript 为了使其收缩，需要更改什么？

所以我想做一个与电脑相关的网站。几年前我对编码很感兴趣，我决定再次学习。我遇到了以下问题

如果你看这张图片，你可以看到我制作的网站的一部分。 我希望它能够响应，这样当我收缩浏览器时，图片左侧的文本（CPU的解释）就会收缩

然而，这种情况正在发生：
我希望图片下面的文本，在它旁边，并且缩小。几个小时后，我试着用display:和margin:等做了一些事情，我决定问你们

以下是我的代码（我知道代码不是最好的）：

CSS：

HTML：

---

如果您需要任何澄清，请询问我。

CSS代码中的所有尺寸和边距都是恒定的像素长度

相反，您应该将它们设置为窗口大小的百分比。例如，您可以通过将这行

CSS

放入其

CSS

类中，使div标记或图像的宽度始终为屏幕大小的

20%

，如下所示：

width: 20%;

---

您需要将h4动态宽度周围的div设置为大约60%。为img制作div容器，并将其宽度设置为40%。你也应该使用parahraphs而不是heading-4作为文本

修改HTML：

<div class="text">
  <p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>

响应图像地图

要使图像映射具有响应性，您需要使用js脚本在调整窗口大小时操纵坐标，或者使用.SVG图像作为图像映射：

---

欢迎使用堆栈溢出！请带上，四处看看，并通读，特别是邮政编码和标记等文字，而不是作为图片的文字。为什么：（如果我错了，请纠正我！）问题是，我使用的图像不仅仅是一张图片，它使用了一个图像映射，这使得这种方法不起作用，因为图像映射使用绝对坐标。那么我还能怎么做呢？编辑我的答案。是否只有一种方法可以使文本缩小？是的。通过设置文本宽度%值。您能否在第二个屏幕截图上共享电脑图像下方文本的css？

.text {
  width: 60%;
  float: left;
}

.img-div {
  float: right;
  width: 40%;
}

.img-div img {
  width: 100%;
  height: 100%;
}