如何动态调整一组图像的大小[关闭]答案

【问题标题】：How to dynamically resize a group of images [closed]如何动态调整一组图像的大小[关闭]
【发布时间】：2014-07-01 15:43:56
【问题描述】：

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

Ps: 有没有什么办法可以用 div 让这些片段变成一张大图

【问题讨论】：

【解决方案1】：

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

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

更新 2：

纯CSS方法：

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

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

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

您的链接实际上是绝对定位标签，具有：top,left（或任何其他组合）+ width和身高。只要确保您使用百分比，它就可以保持响应速度。

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

还有一个基于JS的图片地图编辑器：http://www.maschek.hu/imagemap/index

【讨论】：