通过 CSS 缩放不适用于 Microsoft Edge 中的图像映射
Zooming via CSS not working on image map in Microsoft Edge
我正在尝试将 "image and its image map" 大小更改为减少一些百分比。根据媒体屏幕,它应该会减少。但在 Microsoft Edge 中它不起作用。 (我签入了 Chrome,它运行良好。)
看看https://en.wikipedia.org/wiki/The_Club_(dining_club)
中的图像映射示例
我想将它放大到 80%。我通过向图像添加 CSS 缩放样式进行更改。
在 Chrome 中:图像及其图像映射大小减小了 20%。
在 Microsoft Edge 中:只有图像尺寸缩小了 20%,图像映射没有任何尺寸变化。
这里的问题是您对 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);
}
我正在尝试将 "image and its image map" 大小更改为减少一些百分比。根据媒体屏幕,它应该会减少。但在 Microsoft Edge 中它不起作用。 (我签入了 Chrome,它运行良好。)
看看https://en.wikipedia.org/wiki/The_Club_(dining_club)
中的图像映射示例我想将它放大到 80%。我通过向图像添加 CSS 缩放样式进行更改。
在 Chrome 中:图像及其图像映射大小减小了 20%。
在 Microsoft Edge 中:只有图像尺寸缩小了 20%,图像映射没有任何尺寸变化。
这里的问题是您对 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);
}