为了缩小它需要改变什么？答案

【问题标题】：What to change in order for this to shrink?为了缩小它需要改变什么？
【发布时间】：2019-01-07 04:40:42
【问题描述】：

所以我想做一个与电脑相关的网站。几年前我开始编码，我决定重新开始。我遇到了以下问题。

https://imgur.com/VjZaUEZ
如果你看这张照片，你可以看到我制作的网站的一部分。我希望它具有响应性，以便在缩小浏览器时图片左侧的文本（CPU 说明）正在缩小。

但是，这种情况正在发生： https://imgur.com/LBaHlOu
我希望图片下方的文字紧挨着它并缩小。在用 display: 和 margin: 等尝试了几个小时后，我决定问你们。

这是我的代码（我知道这些代码不是最好的）：

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

【问题讨论】：

欢迎来到 Stack Overflow！请带上tour，环顾四周，通读help center，特别是How do I ask a good question? 邮政编码和标记等作为文本，而不是作为图片 i> 的文本。为什么：meta.stackoverflow.com/q/285551/157247

【解决方案1】：

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

相反，您应该将它们设为窗口大小的百分比。例如，您可以通过将这行CSS 放入其CSS 类中，使div 标签或图像的宽度始终为屏幕大小的20%，如下所示：

width: 20%;

【讨论】：

【解决方案2】：

您需要将围绕 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>

CSS：

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

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

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

响应式图片地图

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

【讨论】：