遇到问题：自适应网页中在图片上进行热点<a>链接。

 

一开始就想到使用<map>标签来解决，但限于<map>本身不支持百分比缩放，做自适应缩放还需要js辅助。对于简单块状的热点链接（注：HTML5中a链接不支持shape），我们可以采用纯css来解决。

 

步骤1、让div按照背景图片的自适应等比例缩放，并让背景图片填充整个DIV

<style>
    .bg:before{content: '';display: block;padding-top: 153%}
</style>
<div class="bg" style="background: url('/static/bg.jpg') no-repeat;background-size: cover;position: relative">

</div>

步骤2、使用百分比数值定位图片

<style>
    .bg:before{content: '';display: block;padding-top: 153%}
</style>
<div class="bg" style="background: url('/static/bg.jpg') no-repeat;background-size: cover;position: relative">
    <a href="/wzd/wzd_school_intro?id=1" style="position: absolute;top: 23%;left: 36%;width: 20%;height: 13%;border-bottom: 0px"></a>
    <a href="/wzd/wzd_school_news?id=2" style="position: absolute;top: 36%;left: 20%;width: 20%;height: 13%;border-bottom: 0px"></a>
</div>

 

这样就简单实现了自适应图片的热点链接。