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

Question

我正在尝试将 "image and its image map" 大小更改为减少一些百分比。根据媒体屏幕，它应该会减少。但在 Microsoft Edge 中它不起作用。（我签入了 Chrome，它运行良好。）

看看https://en.wikipedia.org/wiki/The_Club_(dining_club)

中的图像映射示例

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

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

在 Microsoft Edge 中：只有图像尺寸缩小了 20%，图像映射没有任何尺寸变化。

Answer 1

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

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

For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the aforementioned CSS properties).

Source: 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/

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

Zooming via CSS not working on image map in Microsoft Edge

html

css

zooming

imagemap

microsoft-edge