CSS 可缩放图像映射

Question

我有一个问题困扰了我几天：当我调整浏览器 windows（PC 视图、平板电脑视图、移动视图...）大小时，如何使这个拼图图像的中心部分作为 link 工作？我需要 link 培育图像作为 link。

<style type="text/css">
.header-images {
display: table;
}

.row {
    display: table-row;
}

.img-01 {
    display: table-cell;
    border: none;
}

.img-02 {
    display: table-cell;
    border: none;
}

.img-03 {
    display: table-cell;
    border: none;
}

.img-04 {
    display: table-cell;
    border: none;
}

.header-images img {
    width: 100%;
    height: auto;
}
</style>

<div class="header-images">
 <div class="row">
  <div class="img-01">
   <a href="home/zuechter"><img src="http://s27.postimg.org/rloi8ejr7/01_en.png" alt=""></a>
  </div>
  <div class="img-02">
   <a href="/home/hundesport"><img src="http://s27.postimg.org/lm0r4qyyr/02_en.png" alt=""></a>
  </div>
 </div>
 <div class="row">
  <div class="img-03">
   <a href="/home/mitglied"><img src="http://s27.postimg.org/6fzarjybn/03_en.png" alt=""></a>
  </div>
  <div class="img-04">
   <a href="/home/jugend"><img src="http://s27.postimg.org/61xyrye83/04_en.png" alt=""></a>
  </div>
 </div>
</div>

Answer 1

我已经设法使用 Matt Stow plugin 修复了它。谢谢马特！

CSS 可缩放图像映射

CSS scalability image map

scalability

imagemap