响应式图像图
发布于 2021-02-02 16:56:03
我有一个响应式html布局中的现有图像映射。图像根据浏览器大小缩放,但是图像坐标显然是固定的像素大小。我必须选择哪些选项来调整图像地图坐标的大小?
关注者
0
被浏览
51
1 个回答
-
您也可以使用svg代替图像映射。
.hover_group:hover { opacity: 1; } #projectsvg { position: relative; width: 100%; padding-bottom: 77%; vertical-align: middle; margin: 0; overflow: hidden; } #projectsvg svg { display: inline-block; position: absolute; top: 0; left: 0; }
<figure id="projectsvg"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" > <!-- set your background image --> <image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080" /> <g class="hover_group" opacity="0"> <a xlink:href="https://example.com/link1.html"> <text x="652" y="706.9" font-size="20">First zone</text> <rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect> </a> </g> <g class="hover_group" opacity="0"> <a xlink:href="https://example.com/link2.html"> <text x="1230.7" y="952" font-size="20">Second zone</text> <rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect> </a> </g> </svg> </figure>