Question

我将一张大图片切割成更易于管理的图片并将它们组合在一起，以便再次显示大图像。我已经这样做了，因为我希望每个单独的部分都有不同的超链接。现在我看到，当我调整图像大小时，显示屏会碎成碎片。我用过a来将它们放在一起，但不幸的是，这并没有解决问题。如何动态调整图像大小而不会将整个部分分解成碎片。

Ps：是否有任何选项可以使用div

使作品成为一个大图像

Answer 1

您可以在图像上使用CSS贴图，而不是将图像切割成碎片吗？

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

更新2：

纯CSS方法：

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

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

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

您的链接实际上是绝对定位标记，其中包含：顶部，左侧（或任何其他组合）+ 宽度，以及高度即可。只需确保使用百分比，即可保持响应。

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

并且还有一个基于JS的图像映射编辑器：http://www.maschek.hu/imagemap/index