给body添加全屏背景图(backgroung-size:cover)，如何给图片上某一个区域添加点击事件，适应各个分辨率

Question

有一个需求，需要全屏显示一张区域图，然后给某些区域添加点击事件，想了很久没有想到好的解决办法，暂时是这样应急的（给body设置背景图，backgroung-size:cover，然后根据屏幕定位，这样不同分辨率下定位的点击事件会偏移），哪位高手提示下解决办法，多谢

Answer 1

cover 是按照等比缩放铺满整个区域，只有元素盒子和背景图宽高比例相同时才会完整显示。否则盒子更宽则截去了背景图下边部分，背景适应盒子宽度，更窄则截去背景图右边部分，背景适应盒子高度。
点击事件拿到的是当前屏幕分辨率下的坐标，比如在1080p的网页里，可能点击事件的坐标是 screenX: 276, screenY: 784,但是实际背景图的分辨率是 4500 * 3000。
所以首先需要根据当前屏幕的宽高比例，判断背景图是基于宽还是高等比例缩放。
假设是基于屏幕宽度缩放，则通过屏幕宽度和背景图的宽度，计算出缩放比例。
最后按比例和点击事件中的屏幕坐标，得到在图片中的对应位置。

Answer 2

放弃 background-size:cover

图片 放 DIV 里，width 100%, height 100%
所有响应区域 用 子DIV 覆盖，监听 CLICK 事件
用 transform 缩放 最外层的 DIV（自己计算 cover 需要缩放的比率）

这样 图片 和 响应事件的DIV 都是同样比例缩放的

Answer 3

我能想到的也就是点击区域绝对定位在图片上, 然后top left用百分比

Answer 4

使用 background-size: cover

缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

首先你在原图获取点击的位置，例如原图是 300 * 400 ，你的点击位置是 left: 150 , top: 200, 然后获取屏幕分辨率的宽度和高度，来计算。如果屏幕宽度/屏幕高度大于 3/4 ，说明他会按照宽度来拉伸，此时如果屏幕宽度为 400px,高度为400px, 那么位置计算为，ratio = 4/3 , newLeft = 150 * 4 / 3, newTop = 150 * 4 / 3。 如果是如果屏幕宽度/屏幕高度小于 3/4，如果此时，屏幕宽度为200，高度为 800，说明他会按照高度的比例来计算，因此，你的 ratio = 800/400 , newLeft = 150 * 2 ,newTop = 150 * 2

Answer 5

map标签了解一下

<map name="map1">
    <area href="URL地址" shape="填写shape值" coords="填写shape值的coords值 /">
    <area href="URL地址" shape="填写shape值" coords="填写shape值的coords值 /">
</map>

<area>
嵌套在 <map> 内部，定义图像映射中的区域。

alt：规定区域的替代文本。

href：定义了相关区域所连目标。

target：定义了在何处打开目标链接。

_blank：在新窗口打开。
_self：（默认）使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
_parent：在父框架集中打开。
_top：在整个窗口中打开。
shape：定义了相关区域的形状。

default（ 默认值）：规定全部区域。
rect：矩形区域。
circle：圆形区域。
poly：多边形区域。
cooreds：定义相关区域的坐标。（和 shape 属性搭配使用）

当 shape 属性为 rect 时，代表相关区域为 矩形，cooreds 属性值为 (x1,y1,x2,y2)，其中 x1、y1 为左上角的坐标，x2、y2 为右下角的坐标。
当 shape 属性为 circle 时，代表相关区域为 圆形，cooreds 属性值为 (x,y,radius)，其中 x、y 为圆形的中心坐标，radius为圆形的半径。
当 shape 属性为 poly 时，代表相关区域为 多边形，cooreds 属性值为 (x1,y1,x2,y2,x3,y3…xn,yn)，规定了多边形各个顶点的坐标，由于浏览器会自动闭合多边形，所以尾部坐标不必与第一个坐标相等。