通过 CSS 缩放不适用于 Microsoft Edge 中的图像映射答案

【问题标题】：Zooming via CSS not working on image map in Microsoft Edge通过 CSS 缩放不适用于 Microsoft Edge 中的图像映射
【发布时间】：2015-12-03 18:12:19
【问题描述】：

我正在尝试将“图像及其图像映射”的大小更改为减少百分之几。根据媒体屏幕，它应该会减少。但在 Microsoft Edge 中它不起作用。（我在 Chrome 中检查过，它运行良好。）

看看https://en.wikipedia.org/wiki/The_Club_(dining_club)中的图像映射示例

我想把它放大到 80%。我通过向图像添加 CSS 缩放样式进行了更改。

在 Chrome 中：图像及其图像映射大小减少了 20%。

在 Microsoft Edge 中：仅图像大小减小了 20%，图像映射没有任何大小变化。

【问题讨论】：

标签： html css zooming imagemap microsoft-edge

【解决方案1】：

这里的问题在于您使用了zoom 属性，它在顶级浏览器中的行为截然不同。例如，根据我的粗略测试，Firefox 甚至不支持它。虽然 Microsoft Edge 支持zoom，但在图像映射的处理模型中似乎没有考虑它。

处理模型确实声明应该考虑调整大小的图像：

由于历史原因，在由 CSS 'width' 和 'height' 属性（或者，对于非 CSS 浏览器，图像元素的宽度和高度）引起的任何拉伸之后，坐标必须相对于显示的图像进行解释attributes — CSS 浏览器将这些属性映射到上述 CSS 属性）。

来源：http://www.w3.org/TR/html5/embedded-content-0.html#processing-model-0

符合此要求的现代浏览器在使用width 或height 调整图像大小时确实支持缩小的图像映射坐标。此外，您可以使用transform 调整大小并继续享受正确映射的坐标：

<img src="imagemap.png" usemap="#areas" id="map">
<map name="areas">
    <area href="one.html" shape="circle" coords="100 100 80" title="One">
</map>

然后我们可以变换这个的大小：

#map {
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
}

您可以在此处查看结果：http://jsfiddle.net/jonathansampson/1Lpqsg76/

【讨论】：