Html 如何动态调整一组图像的大小

我已经将一个大图像切割成更易于管理的片段，并将它们放在一起，以便再次显示大图像。我之所以这样做，是因为我希望每个单独的片段都有一个不同的超链接。现在我看到，当我调整图像的大小时，显示器被分成了几块。我使用了一个函数来将它们放在一起，但不幸的是，这并不能解决问题。如何动态调整图像大小而不将整个图像分割成碎片

---

Ps：是否有任何选项可以使用div将这些片段作为一个大图像使用？您可以在图像上使用CSS映射，而不是将图像切割成片段

更新： 对于响应图像映射，有两个选项-JS/SVG，纯CSS仍然可以：

• JQuery插件-
• JavaScript:
• SVG：
• 纯CSS：

更新2：

纯CSS方法：

这不是一张真正的地图，但它遵循的逻辑几乎相同：

您在相对定位的容器中有一个图像：

<div class="imageMap">
   <img src="yourimage.png" style="position: relative;"> 
   <a href="yourURL" class="yourLink"></a>
</div>

---

还有一个基于JS的图像映射编辑器：

你应该考虑保持图像的完整性，只是将链接映射到图像上的不同位置。第二次在单个图像上使用图像映射。我以前使用映射，但是当我调整图像以使其移动友好时，映射中的链接不适应图像。我使用映射。但是，当我调整图像大小使其便于移动时，映射中的链接不会根据图像进行调整。我已使用响应图像映射选项更新了一点答案。非常感谢！有没有办法查看纯CSS示例的代码？我将再次更新答案，以便能够发布代码。

.yourLink  {
   position: absolute;
   left: 11%;
   top: 5%;
   width: 25%;
   height: 34%;
}